<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 實用盒子經(jīng)典案例 </title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#div-box1{
width:400px;
height:500px;
border:1px solid red;
margin:10px 0 0 150px;
}
.faceul{
list-style-type:none;/*去掉li前面的黑點*/
background-color:pink;
}
.faceul img{
width:80px;
margin:5px 0 0 10px;
}
.faceul li{
float:left;/*左浮動,為了讓li放到一排*/
border:1px solid blue;
margin-left:5px;
margin-top:10px;
width:100px;
height:80px;
}
.faceul span{
font-size:small;
display:block;/*把行內(nèi)元素轉(zhuǎn)變成塊級元素*/
margin-left:35px;
margin-top:-5px;
}
/*偽類選擇器*/
.faceul a:link{
color:black;
text-decoration:none;/*去掉下劃線*/
}
.faceul a:hover{
color:blue;
text-decoration:underline;/*加上下劃線*/
}
</style>
</head>
<body>
<div id="div-box1">
<ul class="faceul">
<li><span><a href="#">二十五</a></span></li>
<li><span><a href="#">二十五</a></span></li>
<li><span><a href="#">二十五</a></span></li>
<li><span><a href="#">二十五</a></span></li>
<li><span><a href="#">二十五</a></span></li>
<li><span><a href="#">二十五</a></span></li>
<li><span><a href="#">二十五</a></span></li>
<li><span><a href="#">二十五</a></span></li>
</ul>
</div>
</body>
</html>
總結(jié):
1.優(yōu)酷現(xiàn)在還在用;
QQ截圖20170122210127.png
