一个简单的css+div布局实例,让你很明了的了解怎么布局!

一个简单的css+div布局实例,让你很明了的了解怎么布局!


分析它的结构,有以下几个部分:黑色的头部,蓝色的主体,拆分成红色的变蓝,和右边的导航及主体部分,最下面的黄色是底部,结构相当简单,现在开始写它的css了,
定义最上面的黑色为header:
复制代码
  1. #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
然后中间的蓝色主体叫mainbox吧,那么样式表可以写:
复制代码
  1. #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
以此定义其他如下:
复制代码
  1. #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}     /*******上右下左*******/  
  2. #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
  3. #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
  4. #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中就可以了,
复制代码
  1. <BODY>
  2.   <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
  3.   <div id="mainbox">
  4.   <div id="sidebar">
  5.   </div>
  6.   <div id="menu">4323434</div>
  7.   <div id="content">
  8.     <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>
  9.   </div>
  10. </div>
  11. <div id="footer">这里是foot部分,放置版权啥的</div>
  12. </BODY>

刷新发现,是如图效果,但是,所有的div都是靠左边,怎么才能居中呢??原因是我们没有定义body里元素的位置,所以css里加上:
复制代码
  1. body{text-align:center;}  
这样就大功告成了!

完整的页面就是:
复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <style tpye="text/css">
  5. <!--
  6. body{text-align:center;}           /***********这个是限定主面的居中效果,如果没有,默认在左侧显示*********/
  7. #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}                  
  8. #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
  9. #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}     /*******上右下左*******/  
  10. #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
  11. #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
  12. #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
  13. -->
  14. </style>
  15. </HEAD>
  16. <BODY>
  17.   <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
  18.   <div id="mainbox">
  19.   <div id="sidebar">
  20.   </div>
  21.   <div id="menu">4323434</div>
  22.   <div id="content">
  23.     <div align="left"><img src="200832420432288343.jpg" alt="家园中文网站长站" width="502" height="361"></div>
  24.   </div>
  25. </div>
  26. <div id="footer">这里是foot部分,放置版权啥的</div>
  27. </BODY>
  28. </HTML>

更多div+css布局,可以来 http://www.cndorm.com/html/117/这里交流

你可能感兴趣的:(html,css)