很多网站其实都用了雪碧图，确实方便了制作，以前以为这种小图标，都是一个一个图片呢（笑）

效果图如下：

代码如下：

<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 雪碧图的制作的更多相关文章

  1. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

  2. CSS雪碧图（精灵图）使用

    1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...

  3. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  4. 前端优化：css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  5. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  6. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  7. css雪碧图（精灵图）与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  8. css雪碧图制作

    使用css背景合并工具cssSprite 工具下载链接: http://download.csdn.net/download/wx247919365/8741243 1.选择文件 2.生成雪碧图 3. ...

  9. css sprite，css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

随机推荐

  1. （剑指Offer）面试题33：把数组排成最小的数

    题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路: 1.全 ...

  2. Oracle闪回

    在PLSQL开发时,有时候会遇到对表的误删除,其实遇到这种情况不需要紧张,如果问题较大,请DBA帮忙,如果只是小问题,只需自己处理,利用flashback闪回操作即可,可将表进行恢复 在删除表时,系统 ...

  3. Javascript实现笛卡儿积算法

    在根据商品属性计算SKU时,通常会对商品不同选项的不同属性进行笛卡儿积运算. 这是在NodeJs里的实现版本,目前用在生产环境. function cartesian(elements) { if ( ...

  4. Receive Windows Messages In Your Custom Delphi Class - NonWindowed Control - AllocateHWnd

    http://delphi.about.com/od/windowsshellapi/a/receive-windows-messages-in-custom-delphi-class-nonwind ...

  5. Windows Self Signed Driver

    In particular, Microsoft® instituted a device driver certification process for its Windows® desktop ...

  6. cmd下运行PowerShell命令

    PowerShell -Command "& {Get-EventLog -LogName security}"

  7. MySQL中进行树状所有子节点的查询

    在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. ...

  8. 关于javaScript注册事件传递参数的浅析

    最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限 ...

  9. GLSL实现Image Filter 【转】

    http://blog.csdn.net/a3070173/archive/2008/11/27/3390477.aspx 图像过滤无论是在作图工具还是特效的实现上都时有运用,这里发一些通常会使用到的 ...

  10. Android游戏背景音乐音效音量控制

    游戏音效就是我们在玩游戏时出现的音乐,这个也是每个游戏必备的一部分,但有是你做游戏的背景音乐有间断的感觉的话,我们可以用 getCurrentPosition()这个方法来判断一下声音播放的偏移.其实 ...