html文件：
<html>
<head>
<title>优酷</title>
<link rel="stylesheet" type="text/css" href="box.css"/>
</head>
<body>
<div class="div1">
</br>
<span> <b>优酷牛人</b>              
          <font size=2><a href="http://www.youku.com">更多牛人</a></font></span>
<ul class="div2">
<li><a href="http://www.youku.com"><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a></a>  <font color="blue" size=2>莫文蔚</font></li>
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
</ul>
<span> <b>明星空间</b>              
          <font size=2><a href="http://www.youku.com">更多空间</a></font></span>
<ul class="div2">
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
</ul>
<span> <b>优酷公益</b>              
       <font size=2><a href="http://www.youku.com">更多公益官网</a></font></span>
<ul class="div2">
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
<li><a href="http://www.youku.com"><img src="mowenwei.jpg"/></a>  <font color="blue" size=2>莫文蔚</font></li>
</ul>
</div>
</body>
</html>
css文件：
.div1{
width:335px;
height:500px;
border:1px solid gray;
margin-left:100px;
}
.div2{
width:295px;
height:110px;
border:1px solid blue;
margin-left:18px;
padding-left:0px;
}
.div2 li{
list-style-type:none;
float:left;
width:80px;
height:80px;
border:1px solid red;
margin-left:12px;
margin-top:13px;
}
.div2 li img{
width:70px;
height:50px;
margin-left:5px;
margin-top:5px;
}
a{/*使超链接文本变成蓝颜色*/
color:blue;
}
显示效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
