`

动态切换排行榜--音乐频道

    博客分类:
  • CSS
阅读更多

其实就是点一个隐藏一个,显示一个,然后用css排下版就可以了
<div id="top">
  <ul id="sidebar">
    <li class="">v]神州榜</li>
    <li class="">[v]香港榜/li>
  </ul>
  <div id="content">
      <div>
         <ul class="music">
           	 <li class="one">勇敢的心[汪峰]</li>
           	 <li class="two">勇敢的心[汪峰]</li>
	   				 <li class="three">勇敢的心[汪峰]</li>
	   				 <li class="four">勇敢的心[汪峰]</li>
	  				  <li class="five">勇敢的心[汪峰]</li>
	   				 <li class="six">勇敢的心[汪峰]</li>
	   				 <li class="seven">勇敢的心[汪峰]</li>
	    				<li class="eight">勇敢的心[汪峰]</li>
         </ul>
      </div>
      <div>
         <ul class="music">
           	 <li class="one">勇敢的心[汪峰]</li>
           	 <li class="two">勇敢的心[汪峰]</li>
	   				 <li class="three">勇敢的心[汪峰]</li>
	   				 <li class="four">勇敢的心[汪峰]</li>
	  				  <li class="five">勇敢的心[汪峰]</li>
	   				 <li class="six">勇敢的心[汪峰]</li>
	   				 <li class="seven">勇敢的心[汪峰]</li>
	    				<li class="eight">勇敢的心[汪峰]</li>
         </ul>
      </div>
  </div>
</div>

#top div ul#siderbar{
   height:20px;
   line-height:20px;
   width:215px;
   margin:0 auto;
   background:red;
   border-bottom:1px solid #5b5b5b;
   padding-top:5px;
}
#top div ul#siderbar li{ -- li本来就是区块,可以直接浮动
	 float:left;
	 cursor:pointer; ---做成手型
	 width:60px;
	 height:20px;
	 margin-left:5px;
	 color:#666;
	 text-align:center;
	 background:url(images/libg1.gif) no-repeat left center;
}



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics