<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
font-family:"微软雅黑";
font-size:14px;}
a{text-decoration:none;}
ul,li{list-style:none;}
#box{
width:900px;
height:auto;
border:1px solid #006;
margin:0 auto;
overflow:hidden;}
.top{
height:40px;
}
.top a{
display:block;
width:30px;
height:30px;
float:right;
margin:5px;}
.btn-list-off{
background:#fff url(images/anniu.png) no-repeat -163px -45px;}
.btn-car-on{
background:#fff url(images/anniu.png) no-repeat -104px 0px;}
.btn-list-on{
background:#fff url(images/anniu.png) no-repeat -104px -45px;}
.btn-car-off{
background:#fff url(images/anniu.png) no-repeat -163px 0px;}
#box ul li{
width:278px;
float:left;
border:1px solid #009;
height:auto;
list-style:none;
margin:10px;}
.a-img{
width:278px;
height:278px;
display:block;
overflow:hidden;}
p a, p span{
display:block;
line-height:25px;
padding-left:10px;}
.conn{
background-color:#006;
color:#FF0;
text-align:center;
line-height:40px;
margin-top:8px;}
.small{
width::60px;
height:60px;
display:block;
float:left;margin:5px;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取按钮
var liebanniu=document.getElementById("bat1");
var kapanniu=document.getElementById("bat2");
var imgs=document.getElementsByName("img");
liebanniu.onclick=function(){
//改变按钮的class值
liebanniu.className="btn-list-on";
kapanniu.className="btn-car-off";
//改变每一个图片的路径及他们父节点的class值
for(var i=0;i<imgs.length;i++)
{
imgs[i].src = "./images/small.jpg";
imgs[i].parentNode.className = "a-img small";
}
}
kapanniu.onclick=function(){
liebanniu.className="btn-list-off";
kapanniu.className="btn-car-on";
for(var i=0;i<imgs.length;i++)
{
imgs[i].src = "./images/meinv.jpg";
imgs[i].parentNode.className = "a-img";
}
}
}
</script>
</head>
<body>
<div id="box">
<div class="top">
<a href="#" title="列表模式" id="bat1" class="btn-list-off"></a>
<a href="#" title="卡片模式" id="bat2" class="btn-car-on"></a>
</div>
<ul>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="images/meinv.jpg" />
</a>
<p>
<a href="#">白杨</a>
<span>辽宁</span>
<span>21个共同好友</span>
</p>
</div>
<a href="#">
<div class="conn">未分组的好友</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
qq_渐变乀_0
qq_阳光宅男_4
fighting_dundun