经典三列双飞翼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典三列双飞翼布局</title>
<style type="text/css">
/*统一设置顶部底部样式*/
.header, .footer{
width: 100%;
height: 60px;
background-color: #D3D3D3;
}
/*不加这个东西header 和 底部 会有阴影，清除浮动后正常*/
.footer{
clear: both;
}
/*设置顶部底部内部元素样式*/
.content{
width: 1000px;
background-color: #808080;
min-height: 100%;
margin: auto;
text-align: center;
line-height:60px;
}
/*设置左中右三块元素父级容器*/
.container{
width: 1000px;
margin: auto;
}
/*设置中间主体区域*/
.wrap{
width: 100%;
float: left;
}
.main{
min-height: 600px;
margin: 0 200px;
background-color: #F5DEB2;
line-height: 600px;
text-align: center;
}
/*设置左侧区域*/
.left{
width: 200px;
min-height: 600px;
background-color: #87CEF9;
float: left;
margin-left: -100%;
line-height: 600px;
text-align: center;
}
/*设置右侧区域*/
.right{
width: 200px;
min-height: 600px;
background-color: #91EE92;
float: left;
margin-left: -20%;
line-height: 600px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<div class="content">网站头部</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">网站底部</div>
</div>
<pre>
经典三列双飞翼布局创建步骤以及原理
1、创建一个大的容器container，设置页面总宽度并左右居中
2、创建三列DOM结构，顺序很重要
1、主体content在前，其次是left和right；
2、主体content必须套一个父级块，然后将样式加给ta
3、其中main快读100%，left right 宽度固定
4、main left right 的高度暂时先设置固定值，有内容填充后在设置100%，自适应
3、main left right 全部左浮动 因为前面的wrap宽度为100%，因此导致left right 全部被挤下面
4、left设置 margin-left:-1000px; 或者 margin-left:-100px;
(100%就是父级块的宽度1000px,负数表示方向相反,即向左缩进,最终到达父块起始点:0,0)
5、right设置,参考left,只需要margin-left: -200px;
6、content内容块,添加左右外边距,将内容区挤压出来: margin: 0 200px;
并给一个宽度100%,直接引用父级块宽度
</pre>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
经典三列圣杯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典三列圣杯布局</title>
<style type="text/css">
/*统一设置顶部底部样式*/
.header, .footer{
width: 100%;
height: 60px;
background-color: #D3D3D3;
}
/*不加这个东西header 和 底部 会有阴影，清除浮动后正常*/
.footer{
clear: both;
}
/*设置顶部底部内部元素样式*/
.content{
width: 1000px;
background-color: #808080;
min-height: 100%;
margin: auto;
text-align: center;
line-height:60px;
}
/*这里边这个padding为什么表示的含义不是边框不动内容物距离边框内缩小*/
.container{
width: 600px;
/*background-color: #F5D1B2;*/
margin: auto;
padding: 0 200px;
}
/*主体内部三块全部浮动 并设置定位 以及对设置对应偏离的位置*/
.container .main{
width: 100%;
min-height: 650px;
background-color: #F5DEB2;
margin: auto;
float: left;
text-align: center;
line-height: 650px;
}
.container .left{
width:200px;
min-height: 650px;
margin-left: -100%;
background-color: #87CEF9;
float: left;
position: relative;
left: -200px;
text-align: center;
line-height: 650px;
}
.container .right{
width:200px;
min-height: 650px;
margin-left: -200px;
background-color: #91EE92;
float: left;
position: relative;
right: -200px;
text-align: center;
line-height: 650px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">网站头部</div>
</div>
<div class="container">
<div class="main">主体</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">网站底部</div>
</div>
<br>
<pre>
圣杯布局基本思路以及实现
1、DOM结构特点
1、必须有一个父容器
2、内部三列，主体main必须在最前面，确保可以优先渲染，其次是left和right
2、区块的宽度和高度特点
1、main+left+right = 总宽度
2、父区块的宽度 = 主体宽度
3、优先设置container宽度，如600px 然后main宽度可以设置为100%自适应
4、如果暂时没有填充内容，可以设置一个最小高度min-height就能看到效果；
3、三个区块必须全部浮动
1、因为main区块占据了100%快读，后面left和right必须要被换行才能显示
2、left、right都是浮动元素，所以按照先后浮动顺序显示，main - left - right
4、将浮动区块left 和 right 移动到main区块指定位置
1、通过给left设置对应的负的左侧外边距来实现区块的反向移动
2、left必须跨越整个main区块才可以到达对应的起点，也就是margin-left:100%;
3、right必须跨越自己的宽度也就是margin-left：-200px;
5、给container添加内边距，进行挤压完成布局，这也是圣杯布局的精妙
1、添加左右内边距padding 宽度等于left 和 right即可；
2、谈价左右边距其实就是对应left和right的实际位置
6、将main区块的内容完整的显示出来
1、left和right占据了main区块，覆盖了main区块的部分内容
2、可以对left和right进行相对定位，让他们讲占据的main控件位置腾出来
3、那么left和right的浮动元素，都是脱离文档流的是否可以用相对定位
答案是可以因为相对定位 是相对一其元素所在位置进行的定位，再怎么脱离文档流也是有一个位置的，所以必然可用
4、当前相对位移看控件自身需求偏移量设置
</pre>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
