1、静态布局
2、柔性布局
3、自适应布局
4、流量布局
5、响应式布局
meta http-equiv=' x-ua-compatible ' content=' ie=edge，chrome=1'圣杯布局方式！ doctype html public '-//W3C//dtd XHTML 1.0 transitional//en ' ' http://www.w3.org/tr/XHTML1/dtd/XHTML1- transion padding: 0； } header，footer{ width: 100%； height: 50px； 文本对齐3360中心； line-height: 50px； 后台： yellow； color: #fff； } footer{ clear: both； }.container { min-width :500 px； Overflow :隐藏； padding: 0px 220px 0px 200px； } .middle、 left、 right{ float: left； position: relative； color: #fff； height: 100px； min-height: 200px； } .middle{ width: 100%； 背景：绿色； } .left{ width: 200px； margin-left: -100%； left: -200px； 后台： red； } .right{ margin-left: -220px； width: 220px； right: -220px； 后台： blue； }/style/headbody header头部/headerdivclass=' container ' divclass=' middle '中间适应/div div class='left '左固定/divdivclass dtd XHTML 1.0 transitional//en ' ' http://www.w3.org/tr/XHTML1/dtd/XHTML1- transiiitional xtml ' headmetacharset=' } header，footer{ width: 100%； height: 50px； 文本对齐3360中心； line-height: 50px； 后台： yellow； color: #fff； } footer{ clear: both； } .container{ display: flex； } .left{ width: 200px； 背景色： red； } .middle{ flex: 1； 背景色： green； } .right{ width: 220px； 后台： blue； }/style/headbody header头部/headerdivclass=' container ' divclass=' left '左固定/div div class='middle '中间自适应/divdivclass dtd XHTML 1.0 transitional//en ' ' http://www.w3.org/tr/XHTML1/dtd/XHTML1- transiiitional xtml ' headmetacharset=' } header，footer{ width: 100%； height: 50px； 文本对齐3360中心； line-height: 50px； 后台： yellow； color: #fff； } footer{ clear: both； }.container { overflow : hidden； } .middle、 left、 right{ height: 200px； 浮点：左； } .middle{ width: 100%； 背景色： green； }.middle _ con { margin :0 px-220 px0px-200 px； } .left{ margin-left: -100%； width: 200px； 背景色： red； } .right{ margin-left: -220px； width: 220px； 后台： blue； }/style/headbody header头部/headerdivclass=' container ' divclass=' middle ' divclass=' middle-con '/divdivclass=