- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- 盒子模型应用
- </title>
- <style type="text/CSS">
- * { margin: 0; padding: 0; } .top { width: 100%; height: 50px; background-color:
- black; } .top_content { width: 75%; height: 50px; margin: 0px auto; background-color:
- blue; } .body { margin: 20px auto; width: 75%; height: 1500px; background-color:
- blanchedalmond; } .body_img { width: 100%; height: 400px; background-color:
- darkorange; } .body_content { width: 100%; height: 111px; background-color:
- blueviolet; } .body_no { width: 100%; height: 50px; background-color: aqua;
- } .footing { width: 75%; height: 400px; background-color: indigo; margin:
- 0px auto; } .footing_content { width: 100%; height: 330px; background-color:
- darkseagreen; } .footing_subnav { width: 100%; height: 70px; background-color:
- black; }
- </style>
- </head>
- <body>
- <div class="top">
- <div class="top_content">
- </div>
- </div>
- <div class="body">
- <div class="body_img">
- </div>
- <div class="body_content">
- <div class="body_no">
- </div>
- </div>
- </div>
- <div class="footing">
- <div class="footing_content">
- </div>
- <div class="footing_subnav">
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3106042.html