如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合w3c标准",以便让别人觉得他们的网站用的是最先进的技术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么? 实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:
1.这里的div并不是我们所说的层,虽然他们的标签都是<div>,在这里你可以把div理 解成一个容器,它可以放文字,图片,表格等等.
2.用div布局必须对页面的结构进行准确的分析,当然用table也要分析页面结构.用div要分清上下,左右,实际上div布局也只有上下,左右.分析结构要先整体再部分,先分析整体的页面布局,例如我们一般的页面是上(banner和导航),中(页面主体内容,新闻等等),下(版权信息块)结构.
+------------------------------------+ | | | header | | | |------------------------------------| | | | | | midbody | | | | | | | | | | | |------------------------------------| | | | foot | | | +------------------------------------+
于是我们可以把整个页面放在一个大div内,于是我们可以这样来写<div>结构:
<div id="container">/*大容器放全部内容*/ <div id="header">/*上*/ </div> <div id="midbody">/*中*/ </div> <div id="foot">/*下*/ </div> </div> 解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可 以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。 下面看下这几个css的代码：
/*页面主容器样式*/ #container{ width:90%;/*宽度*/ margin: 0 auto;/*边界auto为自动，这里用到了缩写形式意思为上下为0， 左右自动*/ } /*页面头*/ #header{ width:780px; height: 130px; margin: 0 auto; overflow:hidden;/*防止div被撑开，超过div大小就隐藏*/ background:#999999;/*背景色*/ } /*页面中间*/ #midbody{ width:780px; height: auto; height:auto; margin:0 auto; overflow:hidden; background: #990000;
} /*页面底部*/ #foot{ width:780px; height:100px; margin:0 auto; background: #99FFCC; }
看完整体就要研究部分了，对于部分来说无非就是上下或左右结构了，例如下面的中间又分 为左右。
+------------------------------------+ | | | header | | | |------------------------------------| | | | | | midbody | | | | |leftside| rightside | | | | | | | | | | | | | |------------------------------------| | | | foot | | | +------------------------------------+
于是div结构可写成： <div id="container"> <div id="header"> </div> <div id="midbody"> <div id="leftside"> </div> <div id="rightside"> </div> </div> <div id="foot"> </div> </div>
midbody中的leftside和rightside的css为：
#leftside{ width:220px; float:left;/*该层位于外层的左边*/ height:500px; background:#167692; } #rightside{ width:558px; height:500px; float:right;/*该层位于外层的右边*/ background: #CCCC00; } 如果是这样的结构：
+------------------------------------+ | | | header | | | |------------------------------------| | | rightside | | | rtop | | | | |leftside|---------------------------| | | |rbottom | | | left | right | | | | | | | | | |------------------------------------| | | | foot | | | +------------------------------------+
则div结构为： <div id="container"> <div id="header"> </div> <div id="midbody"> <div id="leftside"> </div> <div id="rightside"> <div id="rtop"> </div> <div id="rbottom"> <div id="left"> </div> <div id="right"> </div> </div> </div> </div> <div id="foot"> </div> </div>
css为： #rtop{ width:558px; height:200px margin:0 auto; background: #CCCC00; } #rbottom{ width:558px; height:300px; margin:0 auto; background: #CCee00; } #left{ width:258px; float:left; height:300px; background: #CCCCed; } #rightside{ width:300px; height:300px; float:right; background: #Cdfd00; } 应该很清楚了吧？只要看懂了最外层的到里面都是一样的道理。 源文件在附件里(index1.html为以上上所说样式,index.html为用div画边框线的样式) 下载附件：div.rar