1.编辑网页时,在body添加透明背景色,便于观察每个区域的大小。
*{
background: rgba(0,0,0,0.1);
}
background: rgba(0,0,0,0.1);
}
2.创建分列标准
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9{
display: block;
position: relative;
min-height: 1px;
float: left;
}
.col-1{
width: 10%;
}
.col-2{
width: 20%;
}
.col-3{
width: 30%;
}
.col-4{
width: 40%;
}
.col-5{
width: 50%;
}
.col-6{
width: 60%;
}
.col-7{
width: 70%;
}
.col-8{
width: 80%;
}
.col-9{
width: 90%;
}
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9{
display: block;
position: relative;
min-height: 1px;
float: left;
}
.col-1{
width: 10%;
}
.col-2{
width: 20%;
}
.col-3{
width: 30%;
}
.col-4{
width: 40%;
}
.col-5{
width: 50%;
}
.col-6{
width: 60%;
}
.col-7{
width: 70%;
}
.col-8{
width: 80%;
}
.col-9{
width: 90%;
}
放进容器里
.container{
max-width: 1080px;
margin:0px auto;
clear: both;
}
max-width: 1080px;
margin:0px auto;
clear: both;
}
3.清除浮动
.clear:before,
.clear:after
{
display:block;
content:" ";
clear:both;
}
.clear:after
{
display:block;
content:" ";
clear:both;
}