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

来源：互联网发布：手游诛仙数据不互通吗编辑：程序博客网时间：2024/04/29 03:58

想做出如下布局：

所给图片是：

主要代码代码如下：

.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里，然后分别写选择器，对每个图片进行定位，就会呈现出自己想要的效果。

0 0