手把手，永哥教你学会css sprite（雪碧图）技术

江山如画 • 2018年2月20日下午12:14 • 网页制作 • 阅读 6948

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 sprite（雪碧图）技术

css sprite（雪碧图）实例二

推荐阅读：CSS Sprites:图片整合技术该文讲解了CSS Sprites图片整合技术实例：导航栏的制作。

发表回复

手把手，永哥教你学会css sprite（雪碧图）技术

css sprite（雪碧图）实例二

推荐阅读：CSS Sprites:图片整合技术 该文讲解了CSS Sprites图片整合技术实例：导航栏的制作。

99%的人还看了以下文章

第14课：元素的定位

0基础学CSS

第12课：高度和宽度

第10课：表格

第7课：HTML标签的属性

实现网页全屏和退出全屏JS代码，多浏览器兼容

发表回复

推荐阅读：CSS Sprites:图片整合技术该文讲解了CSS Sprites图片整合技术实例：导航栏的制作。