一、概念 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>