<!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> .header,.footer{ color: white; /*宽度自适应*/ width: 100%; height: 60px; background-color: lightgray; } .footer{ clear: both; } .content{ max-width: 1000px; min-height: 100%; background-color: gray; margin: auto; text-align: center; line-height: 60px; } .container{ margin: auto; width: 600px; background-color: yellow; overflow: hidden; padding: 0 200px; } .container .left,.right{ float: left; width: 200px; height: 650px; position: relative; } .container .left{ left: -200px; margin-left: -100%; background-color: lightskyblue; } .container .right{ right: -200px; margin-left: -200px; background-color: lightgreen; } .container .main{ width: 100%; height: 650px; float: left; background-color: wheat; } </style> <meta charset="UTF-8"> <title>圣杯三列</title> </head> <body> <!--头部--> <div class="header"> <div class="content">网站头部</div> </div> <!--主体--> <!--1、创建一个大的盒子--> <div class="container"> <!--按照顺序创建盒子--> <!--中间--> <div class="main">中间</div> <!--左侧--> <div class="left">左侧</div> <!--右侧--> <div class="right">右侧</div> </div> <!--底部--> <div class="footer"> <div class="content">网站底部</div> </div> </body> </html>
<!--双飞翼布局
1、创建一个大的盒子 必须设置宽度
2、按照中间、左边、右边的顺序创建三个区块
3、设置三个区块的属性:3.1 三个区块都设置为左浮动(float:left) 3.2 中间部分宽度必须为100% 3.3 设置后左侧、右侧会被挤到下面中间的下面,按照以下设置恢复到正常位置设置左侧区块的margin-left:-100% 右侧区块的margin-left:-200px
-->