                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /信息排列效果

代碼好像沒(méi)問(wèn)題吧，這么不出效果？

<!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>無(wú)標(biāo)題文檔</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>無(wú)標(biāo)題文檔</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");??
		//?獲取多個(gè)圖片對(duì)象	
????????
		var?imgs?=?document.getElementsByTagName("img");
		listBtn.onclick?=?function(){
			?
		//?改變按鈕的class的值
????????lisBtn.className?=?"btn-list-on";
????????carBtn.className?=?"btn-car-off";

	????//?改變每一個(gè)圖片的路徑以及它的對(duì)應(yīng)的父節(jié)點(diǎn)的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="#">白陽(yáng)</a>
				<span>遼寧</span>
				<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
				<span>遼寧</span>
				<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
				<span>遼寧</span>
				<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
				<span>遼寧</span>
				<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
				<span>遼寧</span>
				<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
				<span>遼寧</span>
				<span>21個(gè)共同好友</span>
			?</p>?
			?</div>
			?<div?class="bottom">
			?	未分組的好友
			?</div>
		</li>
	</ul>
</div>
</body>
</html>