`

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

    博客分类:
  • 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”压缩包中,包含了开发一个在线音乐排行榜小程序的全部源代码,这为我们深入学习和实践微信小程序开发提供了宝贵的资料。 首先,我们要了解微信小程序的基本...

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

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

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

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

    jquery实现的全屏广告动态元素切换的广告源码-支持自动切换和手动切换两种切换-供大家学习研究参考

    标题中的“jquery实现的全屏广告动态元素切换的广告源码-支持自动切换和手动切换两种切换”指的是一种基于JavaScript库jQuery实现的广告展示技术。这种技术允许广告在全屏模式下动态地切换不同元素,同时提供了两种...

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

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

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

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

    Vue-element自定义切换主题

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

    Spring+SpringMvc+MybatisPlus+Aop(自定义注解)动态切换数据源

    在IT行业中,构建大型分布式系统时,数据源的动态切换是一项关键能力,它允许系统根据业务需求选择不同的数据库进行操作。本项目“Spring+SpringMvc+MybatisPlus+Aop(自定义注解)动态切换数据源”正是针对这一需求...

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

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

    java hibernate不同数据库之间的动态切换

    然而,在某些情况下,我们可能需要在运行时根据不同的条件或需求动态地切换数据库,比如在测试环境和生产环境中使用不同的数据库。这个过程就称为“动态切换数据库”。在本文中,我们将深入探讨如何在Java Hibernate...

    QT实现动态切换语言

    本文将详细讲解如何在QT环境中实现动态切换应用的语言功能,以满足不同用户需求。 首先,理解QT中的多语言支持机制至关重要。QT使用QTranslator类来处理翻译工作,它能够加载和应用语言翻译文件(通常是.qm格式),...

    mybatis+spring实现动态切换数据源

    在企业级应用开发中,动态数据源是一种常见需求,它允许程序在运行时根据不同的业务逻辑切换到不同的数据库。在本项目中,我们将探讨如何利用MyBatis与Spring框架实现动态切换数据源的功能。首先,我们需要理解...

    Android Style\\Theme动态切换

    动态切换Theme和Style可以提升用户体验,使得用户可以根据自己的偏好调整应用界面。这篇博客“Android Style\\Theme动态切换”可能探讨了如何在Android应用程序中实现实时改变主题和样式的技巧。 首先,我们需要...

Global site tag (gtag.js) - Google Analytics