三列布局
两侧两列固定宽度，中间列自适应宽度
三列布局.png
如何实现 实例代码如下
<style>
.content:after{
content:'';
display:block;
clear:both;
}
.menu{
width:100px;
height:300px;
float:left;
background:pink;
}
.aside{
width:200px;
height:300px;
float:right;
background:blue;
}
.main{
height:400px;
margin-left:120px;
margin-right:210px;
background:red;
}
.footer{
background:#ccc;
}
</style>
<diV class="content">
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">main</div>
</diV>
<div class="footer">尾部</div>
效果图如下
三列布局左右固定中间自适应.png
水平等距排列
思路：li的大小 和margin的间距加起来刚好等距于ct的大小 然后利用负margin进行排列，刚好完完整整排下。
范例如下
<style>
ul ,li{
margin:0;
padding:0;
list-style:none;
}
.ct{
width:640px;
overflow:hidden;
border:dashed 1px orange;
margin:0 auto;
}
.item{
float:left;
width:200px;
height:200px;
background:pink;
margin-right:20px;
margin-top:10px;
}
.ct>ul{
margin-right:-20px;
}
</style>
<div class="ct">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
</ul>
</div>
效果图如下：
水平等距排列布局.png
圣杯布局
- 是三列布局，两边固定宽度，中间自适应
- 中间内容元素在 dom 元素次序中优先位置
范例如下
<style>
.content:after{
content:'';
display:block;
clear:both;
}
.content{
padding-left:100px;
padding-right:150px;
}
.aside,.main,.extra{
float:left;
}
.aside{
width:100px;
height:200px;
background:pink;
margin-left:-100%;
position:relative;
left:-100px;
}
.extra{
width:100px;
height:200px;
background:red;
margin-left: -150px;
position:relative;
left:150px;
}
.main{
height:300px;
background:blue;
width:100%;
}
</style>
<div class="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
效果图如下
圣杯布局.png
- 缺点：.mian的最小宽度不能小于.aside的宽度
双飞翼布局
和圣杯布局有异曲同工之妙 解决了圣杯布局的缺点
范例如下
<style>
.content:after{
content:'';
display:block;
clear:both;
}
.aside,.main,.extra{
float:left;/*2*/
}
.aside{
width:100px;/*1*/
height:200px;/*1*/
background:pink;/*1*/
margin-left:-100%;/*4*/
}
.extra{
width:150px;/*1*/
height:300px;/*1*/
background:blue;/*1*/
margin-left:-150px;/*5*/
}
.main{
/* height:300px; *//*第1步添加，第7步注释掉*/
/* background:red; *//*第1步添加，第7步注释掉*/
width:100%/*3*/
}
.wrap{
margin-left:100px;/*6*/
margin-right:150px;/*6*/
background:red;/*7*/
height:350px;/*7*/
}
</style>
<div class="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
效果图如下 ：
双飞翼布局.png
流式布局
bootstrap讲解 我们实现一个简单的栅格系统
弹性布局flex
grid
移动端布局
- 设置 meta ，如
<meta name="viewport" content="width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
- 适配
媒体查询 or 动态 rem
