<!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> * { margin: 0; padding: 0; } .top { /* 宽度高度背景色 */ height: 40px; background-color: #333; } .header { width: 1226px; height: 100px; background-color: #ffc0cb; margin: 0 auto; } .content { width: 1226px; height: 460px; background-color: green; margin: 0 auto; } .left { float: left; width: 234px; height: 460px; background-color: #ffa500; } .right { float: left; width: 992px; height: 460px; background-color: #87ceeb; } /* CSS书写顺序: 浏览器执行效率更高 1. 浮动 / display 2. 盒子模型: margin border padding 宽度高度背景色 3. 文字样式 */ </style> </head> <body> <!-- 通栏的盒子: 宽度和浏览器宽度一样大 --> <div class="top"></div> <div class="header">头部</div> <div class="content"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
