css 雪碧图的制作
发布时间:2015-06-14 00:00:52
很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑)效果图如下: 代码如下:<html><head lang="en"> <meta charset="UTF-8"> ...
很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑)
效果图如下:
代码如下:
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> h3,ul {margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14px;font-weight:400;font-family:"微软雅黑" } li{ display: block; height: 31px; line-height: 31px; overflow: hidden; border-bottom: 1px solid #dedede; margin: 1px 10px 0 } li i{ display:inline; background: url(sidebar.png); width:30px; height: 24px; float: left; margin:3px 10px 0 0 ; } .cat{ width: 150px; background:#f8f8f8 ; border: 1px solid #bbb; } .cat-1 i {background-position: 0 0:} .cat-2 i{background-position: 0 -24px;} .cat-3 i{background-position: 0 -48px;} .cat-4 i{background-position: 0 -72px;} .cat-5 i{background-position: 0 -96px;} .cat-6 i{background-position: 0 -120px;} .cat-7 i{background-position: 0 -144px;} .cat-8 i{background-position: 0 -168px;} </style></head><body><div class="cat"> <ul> <li class="cat-1"> <i></i> <h3>服装内衣</h3> </li> </ul> <ul> <li class="cat-2"> <i></i> <h3>鞋包配饰</h3> </li> </ul> <ul> <li class="cat-3"> <i></i> <h3>运动户外</h3> </li> </ul> <ul> <li class="cat-4"> <i></i> <h3>珠宝手表</h3> </li> </ul> <ul> <li class="cat-5"> <i></i> <h3>手机数码</h3> </li> </ul> <ul> <li class="cat-6"> <i></i> <h3>护肤彩妆</h3> </li> </ul> <ul> <li class="cat-7"> <i></i> <h3>办公电脑</h3> </li> </ul> <ul> <li class="cat-8"> <i></i> <h3>母婴用品</h3> </li> </ul></div></body>
原标题:css 雪碧图的制作
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。
中国跨境电商交易会(跨交会)(跨交会):https://www.ikjzd.com/w/1573201970056650754
跨境@米show:https://www.ikjzd.com/w/1573201970597715970
跨境灯集团:https://www.ikjzd.com/w/1573201971792748546
跨境聚聊:https://www.ikjzd.com/w/1573201972405116929
跨境羊论坛:https://www.ikjzd.com/w/1573201975693795329
亚马逊库存查询:https://www.ikjzd.com/w/1573202018873810946
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html