基础 - 九宫格

结构

<div class="box">
    <ul>
        <li><a href="#"><i></i><span>手机</span></a></li>
        <li><a href="#"><i></i><span>飞机</span></a></li>
        <li><a href="#"><i></i><span>电影</span></a></li>
        <li><a href="#"><i></i><span>游戏</span></a></li>
        <li><a href="#"><i></i><span>彩票</span></a></li>
        <li><a href="#"><i></i><span>加油站</span></a></li>
        <li><a href="#"><i></i><span>医院</span></a></li>
        <li><a href="#"><i></i><span>火车站</span></a></li>
    </ul>
</div>

样式

.box {
    width: 300px;
}
ul {
    list-style-type: none;
    overflow: hidden;
    margin: 0;
    padding: 0;

}
.box li {
    position: relative;
    float: left;
    width: 90px;
    line-height: 100px;
    padding: 5px;
    text-align: center;
}
.box li a {
    text-decoration: none;
}
.box li i {
    position: absolute;
    top: 20px;
    left: 37px;
    width: 26px;
    height: 26px;
    background: url(http://img12.360buyimg.com/uba/jfs/t2860/228/2348548716/20317/f0a9fa2b/57620a6fN77b2b8af.png) no-repeat 0 0;
}

行为

window.onload = function () {
    var aBox = document.getElementsByClassName("box");
    var aI = aBox[0].getElementsByTagName("i");
    for(var i= 0,l=aI.length; i<l; i++) {

        aI[i].style.backgroundPosition = "0 "+i*(-25)+"px";
    }
}