微信導航欄的實現

微信導航欄的實現

以下是使用到的背景圖片，原理是使用內邊距撐開圖片
放在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);
}

大功告成,如下圖