一个简单的css+div布局实例，让你很明了的了解怎么布局！
分析它的结构，有以下几个部分：黑色的头部，蓝色的主体，拆分成红色的变蓝，和右边的导航及主体部分，最下面的黄色是底部，结构相当简单，现在开始写它的css了，
定义最上面的黑色为header：
复制代码
- #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
|
然后中间的蓝色主体叫mainbox吧，那么样式表可以写：
复制代码
- #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
|
以此定义其他如下：
复制代码
- #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}???? /*******上右下左*******/??
- #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
- #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
- #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
|
说明：margin右边的四个值分别对应上右下左，比如menu距下是5px，content距上是4px，所以中间有9px的间距了，而先定义了menu的高位30px，所以content若想和sidebar对齐，则应该定义高度为400-30-4-5=361.上面完成了<style>部分的内容，下面把对应的div放到body中就可以了，
复制代码
- <BODY>
- ??<div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
- ??<div id="mainbox">
- ??<div id="sidebar">
- ??</div>
- ??<div id="menu">4323434</div>
- ??<div id="content">
- ????<div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>
- ??</div>
- </div>
- <div id="footer">这里是foot部分，放置版权啥的</div>
- </BODY>
|
刷新发现，是如图效果，但是，所有的div都是靠左边，怎么才能居中呢？？原因是我们没有定义body里元素的位置，所以css里加上：
复制代码
- body{text-align:center;}??
|
这样就大功告成了！
完整的页面就是：
复制代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <style tpye="text/css">
- <!--
- body{text-align:center;}?????????? /***********这个是限定主面的居中效果，如果没有，默认在左侧显示*********/
- #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}??????????????????
- #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
- #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}???? /*******上右下左*******/??
- #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
- #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
- #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
- -->
- </style>
- </HEAD>
- <BODY>
- ??<div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
