Html 网页布局（一） 


  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. }

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