DIV+CSS布局

一、概念

DIV+CSS布局：实现网页常见布局

优点：

布局是常用属性：

二、代码演示

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .header{             width: 100%;             height: 100px;             background-color: red;         }         .nav{             width: 100%;             height: 50px;             background-color: pink;         }         .content{             width: 100%;             height: 400px;             background-color: gray;         }         .left{             float: left;             width: 30%;             height: 400px;             background-color: yellow;         }         .middle{             float: left;             width: 40%;             height: 400px;             background-color:turquoise;         }         .right{             float: left;             width: 30%;             height: 400px;             background-color: violet;         }         .footer{             width: 100%;             height: 100px;             background-color: blue;         }     </style> </head> <body>     <div class="root">         <div class="header"></div>         <div class="nav"></div>         <div class="content">             <div class="left"></div>             <div class="middle"></div>             <div class="right"></div>           </div>         <div class="footer"></div>     </div>       </body> </html>