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. }
  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>
上一篇:2337:[HNOI2011]XOR和路径 - BZOJ


下一篇:6、二进制安装K8s之部署kubectl