第二章:第14节 全局CSS设置、常用兼容性技巧

更新于:2016-12-21 20:12:11

本节只做了解,摘自其他地方:


全局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>

4IE6下左右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>