div，盒子，CSS，今天不能说全都理解了，但比以前更熟悉了。
额外掌握的，CSS的伪类，以及他的四个属性。
盒子的浮动，在第几行，上浮后就在第几行。
一张天做任务，或图片，上图。
最无奈的，画屋子，树。
<style type="text/css">
.a{
width:1000px;
height:500px;
background-color:#000;
}
.b{
width:1000px;
height:50px;
background-color:#096;
}
.c{
width:100px;
height:100px;
background-color:#FFF;
border-radius:50px;
position:absolute;
left:900px;
top:5px;
}
.d{
width:70px;
height:70px;
background-color:#000;
border-radius:75px;
position:absolute;
left:930px;
top:9px;
}
.e{
width:300px;
height:300px;
background-color:#F60;
position:absolute;
left:300px;
top:210px;
}
.f{
width:0px;
height:0px;
border-left:#000 solid 170px ;
border-right:#000 solid 170px;
border-bottom:#00F solid 85px;
position:absolute;
left:280px;
top:200px;
}
.g{
width:50px;
height:100px;
background-color:#00F;
position:absolute;
left:510px;
top:170px;
}
.h{
width:120px;
height:120px;
border:#FFF solid 1px;
position:absolute;
left:310px;
top:300px;
}
#a{
width:35px;
height:35px;
border:#000 solid 1px;
margin-left:15px;
margin-top:15px;
float:left;
}
.h{
width:120px;
height:120px;
border:#FFF solid 1px;
position:absolute;
left:310px;
top:300px;
}
.i{
width:125px;
height:175px;
border:#FFF solid 5px;
position:absolute;
left:460px;
top:325px;
}
#b{
width:60px;
height:42px;
border:#000 solid 1px;
float:left;
}
.j{
width:20px;
height:150px;
background-color:#093;
position:absolute;
left:700px;
top:360px;
}
.k{
width:0px;
height:0px;
border-left:#000 solid 80px ;
border-right:#000 solid 80px;
border-bottom:#0F3 solid 80px;
position:absolute;
left:630px;
top:280px;
}
.l{
width:0px;
height:0px;
border-left:#000 solid 40px ;
border-right:#000 solid 40px;
border-bottom:#0F3 solid 40px;
position:absolute;
left:670px;
top:240px;
}
.m{
width:0px;
height:0px;
border-left:#000 solid 20px ;
border-right:#000 solid 20px;
border-bottom:#0F3 solid 20px;
position:absolute;
left:690px;
top:220px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h">
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
<div id="a"></div>
</div>
<div class="i">
<div id="b"></div>
<div id="b"></div>
<div id="b"></div>
<div id="b"></div>
<div id="b"></div>
<div id="b"></div>
<div id="b"></div>
<div id="b"></div>
</div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
</body>
鼠标放上去的效果，伪类实现。
<style type="text/css">
div{
width:100px;
height:50px;
float:left;
}
span{
width:100px;
height:50px;
float:left;
}
.aa{
width:300px;
height:50px;
}
#bb{
padding-left:30px;
padding-top:10px;
}
.a{
float:left;
border:#39F solid;
}
.b{
float:left;
border:#39F solid;
}
.c{
float:left;
border:#39F solid;
}
.d{
float:left;
border:#39F solid;
}
.e{
float:left;
border:#39F solid;
}
div:link{
color:#FFF;
}
#bb:visited{
background-color:#0FF;
}
#bb:hover{
background-color:#0FF;
}
</style>
</head>
<body>
<span class="aa"><img src="任务6：聚美优品/捕获.PNG" /></span>
<div class="a" id="bb">首页</div>
<div class="b" id="bb">发现</div>
<div class="c" id="bb">订阅</div>
<div class="d" id="bb">会员</div>
<div class="e" id="bb">我的</div>
</body>