标签：
布局练习
<style>
*
{
margin:0px;
padding:0px;}
body
{
min-width:1000px;}
#a
{
width:100%;
height:100px;
background-color:#006;
top:0px;
left:0px;
position:fixed; z-index:9999;}
#b
{
width:100%;
height:450px;
background-color:#CCC;
position:relative;
top:100px;
}
#c
{
width:100%;
height:500px;
background-color:#0FF;
position:relative;}
#d
{
width:100%;
height:100px;
background-color:#F00;
position:relative;}
#e
{
width:100%;
height:450px;
background-color:#F0F;
position:relative;}
#f
{
width:100%;
height:300px;
background-color:#333;
position:relative;}
#g
{
width:100%;
height:400px;
background-color:#FF0;
position:relative;}
#h
{
width:100%;
height:300px;
background-color:#390;
position:relative;}
#a1
{
width:40%;
height:80px;
background-color:#0F0;
position:relative;
top:10px;
left:100px;}
#a2
{
width:30%;
height:40px;
background-color:#0F0;
position:absolute;
top:5px;
right:100px;}
.a3
{
width:7%;
height:40px;
background-color:#0F0;
margin-left:2%;
bottom:10px;
right:40%;
position:absolute;
float:left
}
.a4
{
width:7%;
height:40px;
background-color:#0F0;
margin-left:2%;
bottom:10px;
right:30%;
position:absolute;
float:left
}
.a5
{
width:7%;
height:40px;
background-color:#0F0;
margin-left:2%;
bottom:10px;
right:20%;
position:absolute;
float:left
}
.a6
{
width:7%;
height:40px;
background-color:#0F0;
margin-left:2%;
bottom:10px;
right:10%;
position:absolute;
float:left
}
#c1
{
width:30%;
height:200px;
background-color:#FF0;
float:left;
margin-left:2%;
margin-top:40px;
}
#e1
{
width:30%;
height:430px;
background-color:#C63;
position:absolute;
right:10%;
top:10px;
}
#ee
{
width:60%;
height:430px;
background-color:#F00;
position:absolute;
left:50px;
top:10px;
}
.e2
{
width:25%;
height:100px;
background-color:#C63;
float:left;
margin:3%;
}
.g1
{
width:20%;
height:360px;
background-color:#00F;
float:left;
margin:2%;
}
#h1
{
width:20%;
height:200px;
top:20px;
margin-left:5%;
background-color:#F00;
position:relative;
}
#h3
{
width:20%;
height:200px;
top:20px;
margin-left:4%;
left:65%;
background-color:#F00;
position:absolute;
}
#h2
{
width:40%;
height:200px;
top:20px;
left:25%;
margin-left:2%;
background-color:#F00;
position:absolute;
}
#h4
{
width:60%;
height:50px;
background-color:#F00;
position:absolute;
bottom:10px;
left:5%;
}
</style>
</head>
<body>
<div id="a"><div id="a1"></div><div id="a2"></div><div class="a3"></div><div class="a4"></div><div class="a5"></div><div class="a6"></div></div>
<div id="b"></div>
<div id="c"><div id="c1"></div><div id="c1"></div><div id="c1"></div><div id="c1"></div><div id="c1"></div><div id="c1"></div></div>
<div id="d"></div>
<div id="e"><div id="e1"></div><div id="ee"><div class="e2"></div><div class="e2"></div><div class="e2"></div><div class="e2"></div><div class="e2"></div><div class="e2"></div><div class="e2"></div><div class="e2"></div><div class="e2"></div></div></div>
<div id="f"></div>
<div id="g"><div class="g1"></div><div class="g1"></div><div class="g1"></div><div class="g1"></div></div>
<div id="h"><div id="h1"></div><div id="h2"></div><div id="h3"></div><div id="h4"></div></div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/yx1314520/p/5770482.html
