CSS完成网页经典布局

╰+攻爆jí腚メ 2022-02-24 01:26 390阅读 0赞

单列布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>一列布局</title>
  6. <!-- 初始化盒子模型，去掉边距，margin:0是上下方向，auto是左右方向，居中了 -->
  7. <style type="text/css"> body{ margin:0;padding:0} .top{ height: 100px;background: blue;} .main{ width:800px;height:300px;background:#ccc;margin: 0 auto} .foot{ width:800px;height:100px;background:brown;margin: 0 auto} </style>
  8. </head>
  9.     <body>
  10.         <div class="top"></div>
  11.         <div class="main"></div>
  12.         <div class="foot"></div>
  13.     </body>
  14. </html>

两列布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>一列布局</title>
  6. <!-- 初始化盒子模型，去掉边距，margin:0是上下方向，auto是左右方向，居中了 -->
  7. <style type="text/css"> body{ margin:0;padding:0} .main{ width: 800px;margin: 0 auto;} .left{ width:20%;height: 500px;float:left;background: yellow;} .right{ width:80%;height: 500px;float:right;background: #ccc;} </style>
  8. </head>
  9. <body>
  10. <div class="main">
  11. <div class="left"></div>
  12. <div class="right"></div>
  13. </div>
  14. </body>
  15. </html>

三列布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>一列布局</title>
  6. <!-- 初始化盒子模型，去掉边距，margin:0是上下方向，auto是左右方向，居中了 -->
  7. <style type="text/css"> body{ margin:0;padding:0} .main{ width: 800px;margin: 0 auto;} .left{ width:33.33%;height: 500px;float:left;background: yellow;} .middle{ width:33.33%;height: 500px;float:left;background:orange;} .right{ width:33.33%;height: 500px;float:right;background: #ccc;} </style>
  8. </head>
  9. <body>
  10. <div class="main">
  11. <div class="left"></div>
  12. <div class="middle"></div>
  13. <div class="right"></div>
  14. </div>
  15. </body>
  16. </html>

中间自适应的三列布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>一列布局</title>
  6. <!-- 初始化盒子模型，去掉边距，margin:0是上下方向，auto是左右方向，居中了 -->
  7. <style type="text/css"> body{ margin:0;padding:0} .left{ width:200px;height: 500px;background: yellow;position:absolute;left:0;top:0} .middle{ height: 500px;background:orange;margin: 0 310px 0 210px;} .right{ width:300px;height: 500px;background: #ccc;position:absolute;right:0;top:0} </style>
  8. </head>
  9. <body>
  11. <div class="left">200px</div>
  12. <div class="middle">Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</div>
  13. <div class="right">300px</div>
  15. </body>
  16. </html>

混合布局

  1. """ 混合布局，把上面的混合使用。 块与块之间的关系，通过css """

发表评论

表情：
评论列表 （有 0 条评论，390人围观）

还没有评论，来说两句吧...

相关阅读