                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息排列效果

代码好像没问题吧，这么不出效果？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style type="text/css">
    *{margin:0px;padding:0px;}
    body{font:"微软雅黑";font-size:14px;}
	a{text-decoration:none;}
	ul,li{list-style:none;}
	#box{height:auto;width:550px;border:1px solid #aaa;margin:0 auto;overflow:hidden;}
	.top{height:40px;}
	.top a{height:16px; width:16px;display:block;float:right;margin:5px;}

	.btn-list-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px 0px;}
	.btn-car-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px -34px;}
	.btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px 0px;}
	.btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px -32px;}
	
	#box ul li{height:auto;width:164px;border:1px solid #aaa;float:left;margin:7px;}
	.a-img{height:164px;width:164px;display:block;overflow:hidden;}
	p a,p span{
		display:block;
		line-height:23px;
		padding-left:10px;
	}
	.bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;}
	.small{height:50px;width:50px;float:left;margin:5px;}
</style>
<script type="text/javascript"> 
       window.onload=function ()
       { 
		var listBtn = document.getElementById("btn1");
		var carBtn = document.getElementById("btn2");  
		// 获取多个图片对象	
        
		var imgs = document.getElementsByTagName("img");
		listBtn.onclick = function(){
			 
		// 改变按钮的class的值
        lisBtn.className = "btn-list-on";
        carBtn.className = "btn-car-off";

	    // 改变每一个图片的路径以及它的对应的父节点的class的值
		for(var i=0;i<imgs.length;i++)
    		{
				imgs[i].src = "http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg";
				imgs[i].parentNode.className = "a-img";
			}
 
		}
		carBtn.onclick = function(){ 
			listBtn.className  = "btn-list-off"; 
			carBtn.className = "btn-car-on";	  
			for(var i=0;i<imgs.length;i++)
			{
				imgs[i].src = "http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
				imgs[i].parentNode.className = "a-img";
			}
		}  

       }
</script>
</head>
 
<body>

<div id="box">
    <div class="top">
		<a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
		<a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
	</div>
	<ul>
		<li>
			<div class="con">
			<a href="#" class="a-img ">
				<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p> 
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li>
		 
		 <li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p> 
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li><li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p> 
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li>
		<li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p> 
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li><li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p> 
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li><li>
			<div class="con">
			<a href="#" class="a-img">
				<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
			</a>
			<p>
				<a href="#">白阳</a>
				<span>辽宁</span>
				<span>21个共同好友</span>
			 </p> 
			 </div>
			 <div class="bottom">
			 	未分组的好友
			 </div>
		</li>
	</ul>
</div>
</body>
</html>