`

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

    博客分类:
  • 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;
}



分享到:
评论

相关推荐

    Android动态切换环境配置-EnvConfigExample_v1.3.0.1.rar

    "Android动态切换环境配置-EnvConfigExample_v1.3.0.1.rar" 是一个专为解决这一问题的项目工程,版本号为1.3.0.1,它提供了灵活的环境切换方案,便于开发者快速适应不同阶段的需求。 1. **环境配置的概念** - 环境...

    Android动态切换环境配置-envconfigexample_product_release_v1.3.0.1.apk

    Android动态切换环境配置3.0生产release版

    jQ手机排行榜标题滑动切换代码.zip

    【标题】"jQ手机排行榜标题滑动切换代码"是一个专为手机网站设计的jQuery特效,主要用于在排行榜区域实现标题的滑动切换效果。这种效果能够提升用户在小屏幕设备上的浏览体验,使得有限的屏幕空间得以充分利用,同时...

    vue3.0-vite-antd 实现动态切换主题.zip

    在Vue3.0框架中,配合Vite构建工具和Ant Design Vue 2.0库,实现动态主题切换是一项常见的需求,特别是在开发具有高度定制化界面的Web应用时。本项目"vue3.0-vite-antd 实现动态切换主题.zip"提供了一种实现方式,...

    在线音乐排行榜小程序源码.rar

    【在线音乐排行榜小程序源码】是一款专为微信平台设计的小程序应用源代码,它提供了实时更新的音乐排行榜功能,让用户可以轻松浏览并收听当下热门的歌曲。通过这个小程序源码,开发者或爱好者可以深入了解微信小程序...

    SpringBoot整合mybatis-plus实现多数据源的动态切换且支持分页查询.pdf

    在SpringBoot项目中,整合Mybatis-Plus并实现多数据源的动态切换,同时支持分页查询是一项常见的需求。以下将详细阐述这个过程中的关键步骤和技术要点。 首先,我们需要引入必要的Maven依赖。这里提到了四个关键...

    springboot-AOP实现多数据源动态切换(Druid连接池)

    在Spring Boot项目中实现多数据源动态切换是一项高级特性,能够使应用根据不同业务需求访问不同的数据库,从而实现服务的解耦和数据库操作的优化。该技术的关键在于如何在同一个应用中配置和使用多个数据源,以及...

    微信小程序开发-在线音乐排行榜案例源码.zip

    在这个“微信小程序开发-在线音乐排行榜案例源码.zip”压缩包中,包含了开发一个在线音乐排行榜小程序的全部源代码,这为我们深入学习和实践微信小程序开发提供了宝贵的资料。 首先,我们要了解微信小程序的基本...

    迅雷排行榜tab切换特效

    其实本特效含三个功能,一是漂亮的列表排行榜,二是排行榜中的序号处理技巧,三是配合了Tab实现列表内容的切换,这是个相当流行的网页效果,希望本素材能为你的前台设计工作带去一些灵感,也会您提供一份学习CSS的好...

    Android动态切换环境配置-envconfigexample.development.debug_v1.3.0.1.apk

    Android动态切换环境配置3.0开发debug版

    网页中图片切换特效--【绝对有价值】

    网页中图片切换特效--【绝对有价值】 网页中图片切换特效--【绝对有价值】 网页中图片切换特效--【绝对有价值】 网页中图片切换特效--【绝对有价值】

    85、jQ手机排行榜标题滑动切换代码

    在本项目中,"85、jQ手机排行榜标题滑动切换代码" 是一个使用jQuery实现的移动设备上的排行榜标题动态切换的解决方案。这个功能常见于各种应用或网站的排行榜模块,通过平滑的动画效果,使用户可以方便地浏览不同...

    信-CAD自动切换输入法

    "信-CAD自动切换输入法"是一款专为CAD用户设计的工具,旨在解决在CAD环境中频繁切换输入法的困扰,提高工作流程的便捷性和效率。这款软件的出现使得用户在输入文字时无需手动切换到中文或英文输入法,系统会自动识别...

    springboot整合redis动态切换每个数据库

    springboot整合redis动态切换每个数据库,

    wxGameRank-master.zip_weixin_微信排行榜_排行榜

    微信排行榜是微信小程序中一种常见的功能,用于展示用户在游戏或特定活动中的排名情况,激励用户参与并提高用户粘性。`wxGameRank-master.zip` 是一个包含微信排行榜实现的代码资源包,专为微信小游戏设计,同时也...

    Vue-element自定义切换主题

    这通常涉及到CSS变量(CSS Custom Properties)的使用,它们是CSS3引入的一种新特性,可以方便地实现主题的动态切换。 1. **CSS变量**: CSS变量允许开发者在CSS中定义可重用的值,这些值可以在整个样式表中引用。...

    JS繁简切换-----------------------

    JS繁简切换 Code By Sundj. 网络上有一个Edited by tMosport写的JS繁简切换的脚本,我觉得不太方便用。 参考了tMosport的代码重写了这个脚本。希望对你有所有帮助。 适用于各种场合,Firefox, IE,Safari,Opera...

    图片切换导航 4张图片轮换切换 有实例!

    在网页设计中,图片切换导航是一种常见的交互元素,它能够以动态的方式展示多张图片,增强用户的浏览体验。本文将详细讲解如何实现一个4张图片轮换切换的导航,适用于各种Web项目。 首先,我们需要理解这个功能的...

    图片切换-简单图片切换-带页码

    图片切换-简单图片切换-带页码 图片切换-简单图片切换-带页码

    集成携程apollo 配置中心的动态切换数据库,mon-platform-dataaccessframework.zip

    在企业级应用开发中,数据源的动态切换是一项重要的需求,尤其在微服务架构中,为了实现高可用、可扩展性以及服务间的隔离,经常需要根据业务场景动态地选择不同的数据库进行读写。携程Apollo配置中心就是这样一个...

Global site tag (gtag.js) - Google Analytics