如何把一张图片上的几个小图片按自己的要求有规律的显示出来

想做出如下布局：

 所给图片是：

主要代码代码如下：

.hBLeft ul li a{
    font-weight: bold;
    letter-spacing: 1px;
    color: #808080;;
    display: block;
    margin: auto;
    width: 100px;
    height: 44px;
    text-align: right;
    border-top: solid 1px #cccccc;
    background: url("images/homeIcon01.png") no-repeat;
}
.hBLeft ul li a.bLListIcon02{
    background-position: 0 -45px;
}
.hBLeft ul li a.bLListIcon03{
    background-position: 0 -89px;
}
.hBLeft ul li a.bLListIcon04{
    background-position: 0 -134px;
}
.hBLeft ul li a.bLListIcon05{
    background-position: 0 -179px;
}
.hBLeft ul li a.bLListIcon06{
    background-position: 0 -224px;
}

<div class="hBLeft">
    <ul>
        <li class="hover"><a href="#" class="borderNone">语言培训</a></li>
        <li><a href="#" class="bLListIcon02">职业技能</a></li>
        <li><a href="#" class="bLListIcon03">学历教育</a></li>
        <li><a href="#" class="bLListIcon04">IT&金融</a></li>
        <li><a href="#" class="bLListIcon05">兴趣爱好</a></li>
        <li><a href="#" class="bLListIcon06">医疗健康</a></li>
    </ul>
</div>

总结：这种布局的肯定要用列表的形式来展现，所以应该把整个图片放到li里，然后分别写选择器，对每个图片进行定位，就会呈现出自己想要的效果。