css sprite(雪碧图)实例二
拼完后的图片:
下面代码是模仿生成一个菜单~~~
HTML代码:
<div id="content"> <ul class="content"> <li class="cat-1"> <i></i> <h3>女装/男装/内衣</h3> </li> <li class="cat-2"> <i></i> <h3>鞋靴/箱包/配件</h3> </li> <li class="cat-3"> <i></i> <h3>童装玩具/孕产/用品</h3> </li> <li class="cat-4"> <i></i> <h3>家电/数码/手机</h3> </li> <li class="cat-5"> <i></i> <h3>美妆/洗护/保健品</h3> </li> <li class="cat-6"> <i></i> <h3>珠宝/眼镜/手表</h3> </li> <li class="cat-7"> <i></i> <h3>运动/户外/乐器</h3> </li> <li class="cat-8"> <i></i> <h3>游戏/动漫/影视</h3> </li> <li class="cat-9"> <i></i> <h3>美食/生鲜/零食</h3> </li> <li class="cat-10"> <i></i> <h3>鲜花/宠物/农资</h3> </li> <li class="cat-11"> <i></i> <h3>房产/装修/建材</h3> </li> </ul> </div>
CSS代码:
<style type="text/css" > #content{ width: 180px; background: #f8f8f8; border: 1px solid #bbb; } h3{ margin: 0; padding: 0; } ul{ list-style: none; padding: 0; } li h3{ font-size: 14px; font-weight: 400; } li{ margin: 3px 10px 0 0; display: block; height: 31px; line-height: 31px; overflow: hidden; border-bottom: 1px solid #dedede; } li i{ background: url(sprite.png); display: inline; width: 40px; height: 28px; float: left; } .cat-1 i{ background-position: -7px -5px; } .cat-2 i{ background-position: -2px -35px; } .cat-3 i{ background-position: -7px -65px; } .cat-4 i{ background-position: -7px -105px; } .cat-5 i{ background-position: -7px -129px; } .cat-6 i{ background-position: -7px -151px; } .cat-7 i{ background-position:-60px -4px; } .cat-8 i{ background-position:-56px -33px; } .cat-9 i{ background-position: -56px -66px; } .cat-10 i{ background-position:-60px -103px; } .cat-11 i{ background-position: -51px -128px; } </style>
效果图如下:
推荐阅读:CSS Sprites:图片整合技术 该文讲解了CSS Sprites图片整合技术实例:导航栏的制作。
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1334.html