是为了丰富网页布局的样式,在CSS没有出来之前,大家会用表格来进行分割布局,很不方便,CSS出来后就好多了。
我们平时所访问的都是服务器反馈到浏览器的HTML页面,但是正如上面说的,HTML无法满足新时代网站拥有者的表达需求,我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。
例如:
<html>
<head>
<title>测试页<title>
<style type="text/css">
.cs{width:100%height:160pxtext-align:centerline-height:160pxbackground:#f0f0f0}
.csl{width:20%height:160pxfloat:leftbackground:#fff}
.csr{width:20%height:160pxfloat:rightbackground:#fff}
</style>
</head>
<body>
<div class="cs">
<div class="csl">
<p>左框内容</p>
</div>
<div class="csr">
<p>右框内容</p>
</div>
</div>
</body>
</html>
CSS+DIV排版其实很容易。如果凭空排版。你可能要先自己用纸画个版面草图。然后用div(不加内容,但是要显示边框)按照草图排版。直到自己满意之后再往div中添加内容。
如果有美工做好的效果图,那么按照效果图来排是最容易的。方法同上。
值得一提的是,排版一般都要求主层居中。而且兼容各个浏览器,关于这个方法,很多人都用
margin:0px 0px auto
这是最通用的让主层居中的方法。但是浏览器兼容性差。在大多数浏览器中,这个样式是不起作用的。
最简单有效,而且兼容所有浏览器的方法就是把主层放在<center></center>里。然后主层里的其它层用float和margin排版。保证不跑偏。
以上是我从事CSS+DIV工作5年的心得。莫见笑。