技術標籤：css3css3

<!-- 區域性導航欄 -->
    <ul class="local-nav">
        <li>
            <a href="#" title="景點·玩樂">
                <span class="local-nav-icon-icon1"></span>
                <span>景點·玩樂</span>
            </a>
        </li>
        <li>
            <a href="#" title="景點·玩樂">
                <span class="local-nav-icon-icon2"></span>
                <span>景點·玩樂</span>
            </a>
        </li>
        <li>
            <a href="#" title="景點·玩樂">
                <span class="local-nav-icon-icon3"></span>
                <span>景點·玩樂</span>
            </a>
        </li>
        <li>
            <a href="#" title="景點·玩樂">
                <span class="local-nav-icon-icon4"></span>
                <span>景點·玩樂</span>
            </a>
        </li>
        <li>
            <a href="#" title="景點·玩樂">
                <span class="local-nav-icon-icon5"></span>
                <span>景點·玩樂</span>
            </a>
        </li>

    </ul>
 

.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}