Heim >Web-Frontend >HTML-Tutorial >css 雪碧图的制作_html/css_WEB-ITnose
css 雪碧图的制作_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:511008Durchsuche
很多网站其实都用了雪碧图，确实方便了制作，以前以为这种小图标，都是一个一个图片呢（笑）
效果图如下：
代码如下：
<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> 雪碧图是自己拼起来的
作为非计算机专业的学生，学前端一个月了，希望自己能坚持下去
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML 之前未接触过的标签_html/css_WEB-ITnoseNächster Artikel：怎么让点击链接后加个下边框_html/css_WEB-ITnose