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;
    }





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

android高仿微信底部渐变导航栏

最近有很多人微信底部的变色卡片导航是怎么做的,我在网上看了好几个例子,都是效果接近,都存有较大的差异,我自己琢磨也做了一个,几乎99%的还原,效果还不错吧 仔细观察微信图片,发现他有两部分内容,外...
  • why200981317
  • why200981317
  • 2016年06月14日 00:06
  • 9201

仿微信底部导航栏您真的会了吗?

像微信底部导航栏应该说是经典中的经典了吧! 效果图如下 由于很久没写布局所以复习下!主要用到以下布局 LinearLayout 线性布局 分为horizontal和vertical 水平合垂直 ...
  • qq_15950325
  • qq_15950325
  • 2016年12月08日 13:03
  • 848

Android UI-仿微信底部导航栏布局

Android UI-仿微信底部导航栏布局  现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀...
  • u010013573
  • u010013573
  • 2016年01月13日 21:50
  • 878

iOS逆向之分析微信导航栏实现

最近需要实现微信的毛玻璃导航栏效果,尝试了各种方式后还是有点差别,这在追求完美的设计师眼里是绝不能忍的,于是只好“看看”原作是怎么实现的。在逆向分析了微信的实现后,发现微信的实现十分特殊,文末会告诉大...
  • qq_30513483
  • qq_30513483
  • 2016年12月19日 21:53
  • 830

如何在Ubuntu QML应用中设计像微信对话那样的UI

我们知道像微信那样的带有气球的对话框对于一些聊天的应用来说非常好。在很多即时通讯的应用中可以用到。在今天的文章中,我们将介绍如何使用QML来实现这样的界面。...
  • UbuntuTouch
  • UbuntuTouch
  • 2015年05月19日 19:51
  • 1360

Android UI-仿微信底部导航栏布局

现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀也好,用户体验也罢。我们开发的主要的还是讲的是如何如...
  • u012398902
  • u012398902
  • 2015年12月15日 12:14
  • 758

安卓微信底部导航栏的实现

这个功能实现网上也有很多种版本,本人参考了http://www.cnblogs.com/xiaofeixiang/p/4156732.html博客,研究了其前辈的写实现,下面是自己对前辈的实现代码做一...
  • xuguoli_beyondboy
  • xuguoli_beyondboy
  • 2015年06月10日 13:42
  • 2287

模仿最新微信主页面UI

一直都想做一个像微信和易信上的滑动导航的UI,
  • xiaorenwu1206
  • xiaorenwu1206
  • 2014年08月15日 16:41
  • 3865

简单的自定义BottomBar-仿微信底部导航栏

今天写一个简单的自定义的BottomBar。 图片文字都是比较随意的,具体实现中自己可以修改。下面是实现图: 首先我们现在布局中把想要显示的整个界面的基本布局搭建成功。(其实主要在于设置你的Tab...
  • lixuce1234
  • lixuce1234
  • 2017年03月30日 17:28
  • 1358

QML 实现导航栏 类似于TabBar

利用QML实现导航栏的功能
  • chyuanrufeng
  • chyuanrufeng
  • 2017年12月14日 20:37
  • 78
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css2仿微信导航栏-滑动门
举报原因:
原因补充:

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