网页设计中HTML代码、CSS代码和javascript的技巧和细节

2020-04-28 08:04:16易采站长站整理

left:50%;
top:50%;
z-index:1;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-52px;
}

六、zoom : normal | number
设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。
七、图片跟文字并排时, 要实现图片文字垂直居中:
1> 将line-height:设置成图片的高度,或者图片父元素的高度.
2> 再将图片的CSS设置vertical-align:middle;
八、li 元素中包含 a img 元素的时候,IE6下出现空白
解决方法 一
使 li 浮动,并设置 img 为块级元素
解决方法 二
设置 ul 的 font-size:0;
解决方法 三
设置 img 的 vertical-align: bottom;
解决方法 四
设置 img 的 margin-bottom: -5px;

细节3………………………………………………………………………………
一、被点击访问过的超链接样式不在具有hover和active
解决方法:改变CSS属性的排列顺序: L-V-H-A
二、FF下连续长字段不能自动换行
解决方法:word-wrap:break-word;overflow:hidden;
三、FF下父容器高度不能自适应
解决办法:清除子元素的浮动
四、IE下图片下方产生空隙
解决办法:定义img 为display:block,或vertical-align为top/bottom/middle/text-bottom
定义父容器的字体大小为零,font-size:0
五、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙
解决办法:相邻的非浮动元素也设置浮动;
浮动元素相对IE6定义_margin-right:-3px;
六、LI内容超长后以省略号显示
解决办法: white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;
七、文本不能垂直居中
解决办法:行高和容器高度相等line-height=height;
八、文本输入框和相邻的文本不能对齐
解决办法:设置文本输入框vertical-align:middle;
九、IE设置滚动条样式
解决办法:


body{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}

十、IE6无法定义高度为1px的容器
解决办法:overflow:hidden
zoom:0.8
line-height:1px