[网页基础]CSS+DIV布局,简单布局例子
今天用CSS+DIV写了一个很典型的例子，小结一下供不会的网友参考，高手略过。
写网页,一定得要CSS+DIV才好控使，CSS语句转来转去就是那几句，但要用好一定得多练习，今天写了一个简单的例子，代码很简单，用到了网上很多地方提到的"三列对齐"的技巧，这个布局很典型。
先上图，一看就能明白：
CSS语句如下:
<style type ="text/css" >
body{ margin :0;}
.main{margin:0 auto; width: 400px; overflow :hidden ; background-color :#f0ffcd;padding:0;}/*主容器*/
.top{margin:0;height:120px;background-color :#0099fd ;}/*顶*/
.left{width:100px;height:auto;float:left; background-color :Green; }/*左部分*/
.middle{ width:auto ;margin:0 80px 0 100px; overflow :hidden ;}/*中部*/
.right{ margin :0; width:80px; float :right ; background-color : Olive ; }/*右部分*/
.left,.middle,.right{margin-bottom:-10000px;padding-bottom:10000px;}/*三列一样高的技巧*/
.bottom{margin:0 auto; width :400px; height:120px;overflow :hidden ; background-color :#0099fd ;}/*底部*/
.clear{ clear :both ; overflow :hidden ; }/*消除上边对下边的影响*/
</style>
主页<body>代码如下：
<body>
<form id="form1" runat="server">
<div class ="main"><%--主容器--%>
<div class ="top"><%--顶--%>
<h3>页面测试</h3>
</div>
<div class ="left"><%--左--%>
<div class ="reporttitle"><h3 >这里是左边</h3></div>
</div>
<div class ="right" ><%--右--%>
<h3>这里是右边</h3>
</div>
<div class ="middle" ><%--中--%>
<h5>这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这里是中间这是中间这里是中里是中间这里是中间这里是中间这是中间这里是中间这里是中里是中间这里是中间这里是中间这是中间这里是中间这里是中里是中间这里是中间这里是中间这是中间这里是中间这里是中间这里是中间这里是中间这是中间这里是中间这里是中间这里是中间这里是中间</h5>
</div>
<div class ="clear"></div><%--BUG--%>
</div>
<div class ="bottom"><%--页脚--%>
<h3>这里是页脚，欢迎诉问小颗豆博客http://www.cnblogs.com/dooroo</h3>
</div>
</form>
</body>
用这个例子就可以扩展成很多的布局格式。
