微信导航栏的实现

微信导航栏的实现

以下是使用到的背景图片，原理是使用内边距撑开图片
放在images文件夹中的ao.png

放在images文件夹中的tu.png

下面是html标签

<ul>
    <li>
        <a href="#">
            <span>首页</span>
        </a>
    </li>
</ul>

下面是css样式

ul li {
    margin: 100px;
    list-style: none;
    float: left;
}

下面设置文字左边的背景a标签，右边的背景是span标签，设置内左边距为15px，设置行高33px

ul a {
    text-decoration: none;
    display: block;
    padding-left: 15px;
    line-height: 33px;
    background: url(images/tu.png) no-repeat left;
}

设置span样式，设置内右边距15px，使输入文字撑开图片，兼容多个文字，设置行高（33px）居中文字

ul span {
    color: #fff;
    display: block;
    padding-right: 15px;
    line-height: 33px;
    background: url(images/tu.png) no-repeat right;
}

如下图由文字的多少而撑开背景图片

下面实现鼠标进过实现背景凹下去，css样式为

ul li a:hover {
    background-image: url(images/ao.png);
}
ul li a:hover span {
    background-image: url(images/ao.png);
}

大功告成,如下图