分享几条CSS运用时遇到的问题与解决的好方法
作者:商视互联 来源:北京做网站公司 日期:2012/10/3 18:39:06 热度:℃ [ 标签:网页设计 ]
现在整理出一小集CSS常用到的东西,与大家分享希望对大家有帮助:
1.页面内容居中
01 |
body{ |
02 |
margin : 0 auto ; |
03 |
} |
2.单行文字图标居中
01 |
div { |
02 |
height : 25px ; |
03 |
line-height : 25px ; |
04 |
} |
05 |
//也就是给height和line-height同样的高度,再用margin- bottom 来细调。 |
3.当网页字体小于12px时 chrome内核浏览器始终显示为12px
01 |
body{ |
02 |
-webkit-text-size-adjust: none ; /*for chorme*/ |
03 |
} |
4.ie6双倍margin的bug
01 |
#box{ |
02 |
float : left ; |
03 |
width : 100px ; |
04 |
margin : 0 0 0 100px ; //ie 6 会产生 200px 的距离 |
05 |
display : inline ; //解决办法 |
06 |
} |
5. 多个class合并书写
01 |
//通常class里面只写一个值,事实上可以多个值,用空格隔开即可。 |
6.给网页换个鼠标指针
01 |
cursor : url ( '指针绝对路径' ), auto ; |
02 |
//通常这个css写在body和a里 |
7.input文本框光标居中
01 |
//不同浏览器对这个理解不同 |
02 |
//解决方法是设置input高度与文字高度相等,然后用上下padding填充即可。 |
8.css sprites用法
01 |
.a { |
02 |
display :inline- block ; |
03 |
height : 16px ; width : 16px ; |
04 |
background : url ( icon .png) x坐标 y坐标 no-repeat ; |
05 |
} |
9.子容器增长时父容器不自动增长
01 |
//给父容器定义样式 |
02 |
overflow : auto ; |
03 |
zoom: 1 ; //兼容IE 6 |
10.IE6 IE7下li高度问题
01 |
//IE 6 IE 7 将字体高度也算入行高 导致li高度异常 只需给li定义以下样式即可 |
02 |
font-size : 0px ; |
本文网址:
下一篇:北京装修公司(柯达装修)
相关阅读: