标签：
<style type="text/css">
*
{
margin:0px;
padding:0px;}
#a{
width:100px;
height:100px;
top:50px;
left:40px;
background-color:#0F0;
position:relative;}
/*absolute:当使用时，表示在文档流中没有实际存在位置（浮动），在不设置任何方位值时，只能按兵不动，当设置了方位值之后，会紧接着去寻找距离最近的能够将它包含住的父级元素，然后进行定位。*/
/*relative:当使用时，表示在文档中确实占有一定的空间，在不设置任何方位值时，会出现在应该出现的位置（空间），当设置了方位值之后，会在应该出现的位置上进行上、下、左、右的形状位移，而实际上还是占有应该占有的位置（空间）*/
#b{
width:100px;
height:100px;
background-color:#FF0;
position:relative;
}
</style>
</head>
<body>123456789
<div id="a"></div>
12345678912345678912345678912345678912<br />
345678912345678912345678912345678912345<br />
678912345678912345678912345678912345678<br />
9123456789123456789123456789123456789
<div id="b"></div>
</body>
练习
<style>
*{
margin:0px;
padding:0px;}
.a{
width:10%;
height:600px;
position:fixed;}
.aa{
width:100%;
height:60px;
line-height:80px;
position:relative;
}
.b{
width:90%;
height:860px;
margin-left:10%;
position:relative;
z-index:1px;}
.bb{
width:100%;
height:860px;
background:url(../../../../Pictures/3705884_193838193308_2.jpg);
background-size:cover;
position:absolute;}
.bbbbb{
width:100%;
height:860px;
background-color:#000;
opacity:0.4;
position:absolute;}
.bbb{
width:100%;
height:200px;
position:absolute;
top:300px;
color:#FFF;
vertical-align:middle;
z-index:3px;}
.bbbb{
width:70%;
height:200px;
margin-left:15%;
top:400px;
color:#FFF;
position:absolute;
vertical-align:middle;
z-index:3px;}
.c{
width:90%;
height:200px;
background:#F5F5F5;
margin-left:10%;
position:relative;}
.d{
width:90%;
height:800px;
background:#F5F5F5;
margin-left:10%;
position:relative;}
.e{
width:360px;
height:360px;
border:1px solid #D9D9D9;
margin-top:2%;
margin-left:3%;
float:left;}
.e:hover{
border:1px solid #414141;
cursor:pointer;}
.f{
width:90%;
height:200px;
margin-left:10%;
background:#CDCDCD;
margin-top:20px;
position:relative;}
.g{
width:100%;
height:40px;
line-height:30px;
float:left;}
.g:hover
{
background:#CCC;
color:#FFF;
cursor:pointer;}
</style>
</head>
<body>
<div class="a"><div class="aa"> <b>team</b></div><div class="g"> esc</div><div class="g"> tab</div><div class="g"> capslk</div><div class="g"> shift</div><div class="g"> ctrl</div><div class="g"> alt</div><div class="g"> space</div><div class="g"> backspace</div></div>
<div class="b"><div class="bb"></div><div class="bbbbb"></div><div class="bbb"><font size="10" ><b><center>ELEGANT DESIGN</center></b></font></div><div class="bbbb"><font face="Lucida Console, Monaco, monospace" size="+2" ><center>We focused on usability template combined useful content blocks hased on that</center></font></div></div>
<div class="c"><font size="+6" face="Lucida Console, Monaco, monospace"><b><center><br />Sercives</center></b></font><br /><font size="+3"><center>This Is What We Are Good At</center></font></div>
<div class="d"><div class="e"></div><div class="e"></div><div class="e"></div><div class="e"></div><div class="e"></div><div class="e"></div></div>
<div class="f"><font size="+6" face="Lucida Console, Monaco, monospace"><center><br />Portfolio</center></font><br /><font size="+3"><center>Some Of Our Accomplishments</center></font></div>
</body>
练习 汉企官网布局
<style type="text/css">
*
{
margin:0px;
padding:0px;}
body
{
min-width:1000px;}
.a{
width:100%;
height:100px;
border:1px solid #000;
position:fixed;}
.aa{
width:40%;
height:80px;
border:1px solid #000;
margin-top:10px;
margin-left:10%;
position:absolute;}
.aaa{
width:25%;
height:30px;
border:1px solid #000;
margin-top:5px;
margin-left:66%;
position:absolute;}
.aaaa{
width:35%;
height:20px;
border:1px solid #000;
margin-top:70px;
margin-left:55%;
position:absolute;}
.aaaaa{
width:20%;
height:20px;
border:1px solid #000;
margin-left:4%;
float:left;}
.b{
width:100%;
height:440px;
border:1px solid #000;
top:100px;
position:relative;}
.c{
width:80%;
height:500px;
left:10%;
border:1px solid #000;
top:120px;
position:relative;}
.d{
width:31%;
height:230px;
border:1px solid #000;
margin:10px;
float:left;}
.e{
width:80%;
height:100px;
left:10%;
border:1px solid #000;
top:140px;
position:relative;}
.f{
width:80%;
height:400px;
left:10%;
border:1px solid #000;
top:160px;
position:relative;}
.g{
width:29%;
height:180px;
border:1px solid #000;
margin:10px;
float:left;}
.i{
width:65%;
height:400px;
border:1px solid #000;
position:relative;}
.h{
width:30%;
height:400px;
right:0px;
top:0px;
border:1px solid #000;
position:absolute;}
.j{
width:80%;
height:400px;
left:10%;
border:1px solid #000;
top:300px;
position:relative;}
.k{
width:100%;
height:50px;
border:1px solid #000;
position:relative;}
.l{
width:20%;
height:300px;
border:1px solid #000;
margin:24px;
float:left;}
.m{
width:80%;
height:250px;
left:10%;
border:1px solid #000;
top:350px;
position:relative;}
.n{
width:20%;
height:250px;
border:1px solid #000;
position:absolute;}
.o{
width:40%;
height:250px;
left:25%;
border:1px solid #000;
position:absolute;}
.p{
width:30%;
height:250px;
left:70%;
border:1px solid #000;
position:absolute;}
.q{
width:80%;
height:30px;
left:10%;
border:1px solid #000;
top:400px;
position:relative;}
.r{
width:100%;
height:150px;
border:1px solid #000;
top:430px;
position:relative;}
.s{
width:22%;
height:150px;
left:10%;
border:1px solid #000;
position:absolute;}
.t{
width:22%;
height:150px;
left:39%;
border:1px solid #000;
position:absolute;}
.u{
width:22%;
height:150px;
left:67%;
border:1px solid #000;
position:absolute;}
</style>
</head>
<body>
<div class="a"><div class="aa"></div><div class="aaa"></div><div class="aaaa"><div class="aaaaa"></div><div class="aaaaa"></div><div class="aaaaa"></div><div class="aaaaa"></div></div></div>
<div class="b"></div>
<div class="c"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
<div class="e"></div>
<div class="f"><div class="i"><div class="g"></div><div class="g"></div><div class="g"></div><div class="g"></div><div class="g"></div><div class="g"></div></div><div class="h"></div></div>
<div class="j"><div class="k"></div><div class="l"></div><div class="l"></div><div class="l"></div><div class="l"></div></div>
<div class="m"><div class="n"></div><div class="o"></div><div class="p"></div></div>
<div class="q"></div>
<div class="r"><div class="s"></div><div class="t"></div><div class="u"></div></div>
</body>
标签：
原文地址：http://www.cnblogs.com/a12110303043/p/5770225.html
