码迷,mamicode.com
首页 > Web开发 > 详细

Html 网页布局(一)

时间:2016-03-28 21:42:15      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="decsription" content="一列布局变混合布局" />
  6. <title>一列布局混合布局</title>
  7. <style type="text/css">
  8. body {
  9. margin: 0;
  10. padding: 0; /*清楚默认样式*/
  11. }

  12. .top {
  13. height: 100px;
  14. background: blue;
  15. }
  16. .nav{height:100px;width:1000px;background:#f60;margin:0 auto;}
  17. .main {
  18. width: 800px;
  19. height: 600px;
  20. background: #ccc;
  21. margin: 0 auto;
  22. }
  23. .left{width:200px;height:600px;background:yellow;float:left;}
  24. .right{width:600px;height:600px;background:#369;float:right;}
  25. .sub_l{width:400px;height:600px;background:#218;float:left;}
  26. .sub_r{width:200px;height:600px;background:green;float:right;}
  27. .sub_r_up{width:200px;height:200px;background:#765;}
  28. .sub_r_down{width:200px;height:300px;background:red;}
  29. .bottom {
  30. width: 800px;
  31. height: 100px;
  32. background: #b0b;
  33. margin: 0 auto;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="top">
  39. <div class="nav"></div>
  40. </div>
  41. <div class="main">
  42. <div class="left"></div>
  43. <div class="right">
  44. <div class="sub_l"></div>
  45. <div class="sub_r">
  46. <div class="sub_r_up"></div>
  47. <div class="sub_r_down"></div>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="bottom"></div>
  52. </body>
  53. </html>

Html 网页布局(一)

标签:

原文地址:http://www.cnblogs.com/hsd1727728211/p/5330565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!