<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 实用盒子经典案例 </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;/*把行内元素转变成块级元素*/
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>
总结:
1.优酷现在还在用;
QQ截图20170122210127.png
