本节只做了解,摘自其他地方:
全局CSS设置
1、清除网页中现有标记的内外边距
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,p,th,td{margin:0;padding:0}
2、标题标记的设置
h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}
h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }
h3{font-size:12px}
h4{font-size:12px;font-weight:normal}
3、项目符号和编号
li,ol,ul{list-style:none}
4、图片要去边框
在IE中,图片链接有边框线。
img{border:none;}
5、全局文字大小和颜色
body{font-size:12px;font-family:simsun;background:#fff;color:#2b2b2b}
6、超链接
a{text-decoration:none;cursor:pointer;}
a:link{color:#004276}
a:visited{color:#004276}
a:hover{text-decoration:underline;color:#ba2636}
7、全局的类样式
.red{color:#FF0000;}
.blue{color:#0000FF;}
.floatL{float:left;} /*左浮动*/
.floatR{float:right} /*右浮动*/
.clear{clear:both;} /*清除浮动*/
.blank10{height:10px;clear:both;}
……
1.所有浏览器的主页绝对居中
Firefox中使用margin:0px auto;主页居中。
IE中使用text-align:center,实现主页居中。
body{
font-size:12px;
color:#444;
text-align:center;
background:#f0f0f0 url(../images/bg-body.gif) repeat-x;
}
.box{width:980px;margin:0px auto;text-align:left;}
2、实现单行文本垂直居中
h2{height:30px; line-height:30px;}
3、实现1px高的<div>
在IE6下无法实现1px高的<div>,这是IE6的一个bug。
<style type="text/css">
.line{
height:1px;
background-color:#006600;
overflow:hidden; /*溢出的部分不可见*/
}
</style>
</head>
<body>
<div class="line"></div>
4、IE6下左右margin会加倍
在IE6中,浮动的<div>元素,增加左右margin后,左边的margin会加倍,解决的办法是:display:inline,就是将块元素转成行内元素。
<style type="text/css">
body{margin:0px;padding:0px;}
.div1{
width:200px;
height:100px;
background-color:#FF0000;
float:left;
margin:50px;
display:inline; /*将块元素转成行内元素*/
}
.div2{
width:200px;
height:100px;
background-color:#0000FF;
float:left;
margin:50px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>