关闭

css2仿微信导航栏-滑动门

标签: css导航
84人阅读 评论(0) 收藏 举报

主要的实现方式是

说明图片为雪碧图

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





1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:131次
    • 积分:21
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档