html
<!DOCTYPE html>
<html>
<head>
<title>youku.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html">
<link rel="stylesheet" type="text/css" href="./youku.css">
</head>
<body>
<div class="div1">
<div>
<span class="span1"><a class="font1">优酷牛人</a><a href="#1">更多牛人</a></span>
<ul class="faceul">
<li><img src="img/1.jpg"><br />
<a class="font2" href="#2">张三</a></li>
<li><img src="img/1.jpg"><br />
<a class="font2" href="#3">张三</a></li>
<li><img src="img/1.jpg"><br />
<a class="font2" href="#4">张三</a></li>
</ul>
</div>
<div>
<span class="span1"><a class="font1">优酷明星</a><a href="#1">更多明星</a></span>
<ul class="faceul">
<li><img src="img/1.jpg"><br />
<a class="font2" href="#2">张三</a></li>
<li><img src="img/1.jpg"><br />
<a class="font2" href="#3">张三</a></li>
<li><img src="img/1.jpg"><br />
<a class="font2" href="#4">张三</a></li>
</ul>
</div>
<div>
<span class="span1"><a class="font1">优酷达人</a><a href="#1">更多达人</a></span>
<ul class="faceul">
<li><img src="img/1.jpg"><br />
<a class="font2" href="#2">张三</a></li>
<li><img src="img/1.jpg"><br />
<a class="font2" href="#3">张三</a></li>
<li><img src="img/1.jpg"><br />
<a class="font2" href="#4">张三</a></li>
</ul>
</div>
</div>
</body>
</html>
css
body {
width: 1000px;
height: 1000px;
margin: 0 auto;
border: 1px solid red;
}
.div1 {
width: 350px;
height: 370px;
border: 1px solid blue;
}
/*常用字体*/
.font1 {
font-size: 15px;
font-weight: bold;
}
.font2 {
font-size: 12px;
float: left;
}
.span1 { /* background-color: green; */
display: block;
}
.faceul {
}
.span1 a:LINK {
text-decoration: none;
float: right;
font-size: 12px;
}
.span1 a:HOVER {
text-decoration: underline;
color: red;
}
.faceul a:LINK {
text-decoration: none;
margin-left: 32px;
}
.faceul a:HOVER {
text-decoration: none;
color: green;
}
/* a:LINK{
text-decoration: none;
}
a:HOVER{
text-decoration: underline;
color: red;
}
*/
.div1 ul { /* border: 1px pink solid; */
height: 85px;
margin-top: 5px;
list-style-type: none;
/* background-color: pink; */
padding: 0;
}
.div1 li {
float: left;
margin-left: 25px;
}
.div1 img {
height: 80px;
margin: 0px;
}