css2仿微信导航栏-滑动门

原创 2016年05月30日 17:22:18

主要的实现方式是

说明图片为雪碧图

1、将一张背景1图片给a标签2、将背景2设置给span标签并不设置宽度

3同样的方式给:hover再设置不同的背景12

a标签代码片段li 

a {
        height: 33px;
        /* line-height:75px; */
        color: orange;
        text-decoration: none;
        background: url('bg.png') no-repeat 0px -192px;
        padding-left: 10px;
        display: inline-block;

span标签代码片段:

span {
        height: 33px;
        line-height: 33px;
        text-decoration: none;
        background: url('bg.png') repeat right -192px;
        padding-right: 10px;
      display: inline-block;

}   

 a:hover span {
        height: 31px;
        color: yellowgreen;
        background: url('bg.png') repeat right -144px;
    }





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

滑动门制作的月光博客导航栏

  • 2013年01月10日 13:51
  • 3KB
  • 下载

滑动门导航栏

  • 2013年01月05日 20:45
  • 3KB
  • 下载

Android仿微信滑动导航栏的实现(下)

在上一节中我们已经实现了导航条的滑动条效果
  • ywl5320
  • ywl5320
  • 2014年08月16日 01:37
  • 1129

仿微信可滑动的底部导航栏

效果图

高仿微信底部导航栏--可滑动

  • 2016年04月07日 12:05
  • 8.73MB
  • 下载

顶部导航栏可点击可滑动,仿微信仿豆瓣

转载请注明出处: 使用ViewPager,PagerSlidingTabStrip,SwipeRefreshLayout打造一款可以点击可以侧滑的顶部导航栏。 先简单介绍一下所用的两个个开源库...

Android仿微信滑动导航栏的实现(上)

在微信5.3.1Android版本中,微信的导航栏切换使用的huadong
  • ywl5320
  • ywl5320
  • 2014年08月16日 01:01
  • 1602

微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列(4)

底部3-5个的底部导航栏,目前在移动端上是主流布局之一 因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏 相关教程:http://blog.csdn.net/michael_ouyan...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css2仿微信导航栏-滑动门
举报原因:
原因补充:

(最多只允许输入30个字)