基础 - 九宫格

结构

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