* { ???margin: 0px; ???padding: 0px;}.top { ???width: 100%; ???height: 50px; ???background-color: antiquewhite;}.top_content { ???width: 75%; ???height: 50px; ???margin: 0px auto; ???/*上下为0，左右自适应*/ ???background-color: aqua;}.body { ???margin: 20px auto; ???width: 75%; ???height: 1500px; ???background-color: aquamarine;}.body_img { ???width: 100%; ???height: 400px; ???background-color: beige; ???background-image: url(http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/t_8L7BYYH7PD%606Z@3F4X]2V8H.png);}.body_content { ???width: 100%; ???height: 1100px; ???background-color: chartreuse;}.body_no { ???width: 100%; ???height: 50px; ???background-color: coral;}.footing { ???width: 75%; ???height: 400px; ???background-color: darkblue; ???margin: 0px auto;}.footing_content{ ???width: 100%; ???height: 350px; ???background-color: forestgreen;}.footing_subnav{ ???width: 100%; ???height: 50px; ???background-color: mediumturquoise;}<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="tzy.css" type="text/css"></head><body><div class="top"> ???<div class="top_content"> ???</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></div></body></html>
HTML学习笔记 w3sCss盒子模型应用案例（div布局） 第十一节 （原创） 参考使用表
原文地址：http://www.cnblogs.com/ttzzyy/p/7512999.html