目标框架结构
绘制框架结构
CSS样式代码实现
*{
margin: 0 auto;
padding: 0 auto;
}
.l1{
width: 100%;
height: 30px;
background: #F1F1F1;
}
.l2{
margin-top: 5px;
width: 1210px;
height: 100px;
background: orange;
}
.l21{
float: left;
width: 240px;
height: 100px;
background: blue;
}
.l22{
width: 180px;
height: 48px;
float: left;
background:rgb(255,255,255);
}
.l23{
width: 500px;
height:70px;
margin-top: 25px;
margin-left: 90px;
margin-right: 15px;
float: left;
background: green;
}
.l231{
width: 463px;
height: 34px;
margin-top: 2px;
margin-left: 5px;
background: #aa00aa;
}
.l232{
width: 463px;
height: 24px;
margin-top: 2px;
margin-left: 5px;
background: #aa55aa;
}
.l24{
height: 36px;
width: 140px;
margin-top: 25px;
float: left;
background: red;
}
.l4{
width: 1210px;
height: 42px;
background: #aa33aa;
}
.l3{
height: 535px;
width: 1210px;
background: #3333aa;
}
.l31{
height: 535px;
width: 242px;
background: #333333;
float: left;
}
.l32{
height: 535px;
width: 726px;
background: #999;
float: left;
}
.l321{
height: 335px;
width: 726px;
background: #727;
}
.l322{
height: 200px;
width: 726px;
background: #121;
}
.l3221{
height: 190px;
width: 180px;
background: #a21;
float: left;
}
.l3222{
height: 190px;
width: 180px;
background: #421;
float: left;
}
.l3223{
height: 190px;
width: 180px;
background: #621;
float: left;
}
.l3224{
height: 190px;
width: 180px;
background: #821;
float: left;
}
.l33{
height: 535px;
width: 242px;
background: #666;
float: left;
}
网友评论