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

效果图如下：

代码如下：

<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. MySQL 日期时间

    NOW()函数以`'YYYY-MM-DD HH:MM:SS'返回当前的日期时间,可以直接存到DATETIME字段中.CURDATE()以’YYYY-MM-DD’的格式返回今天的日期,可以直接存到DAT ...

  2. SQLServer: 无法修改表

    工具—选项—Designers—表设计器和数据库设计器—阻止保存要求重新创建表的更改前的勾去掉.

  3. cJSON 使用笔记

    缘      起 最近在stm32f103上做一个智能家居的项目,其中选择的实时操作系统是 rt_thread OS v1.2.2稳定版本,其中涉及到C和java(android)端数据的交换问题,经 ...

  4. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  5. DP总结 ——QPH

    常见优化 单调队列 形式 dp[i]=min{f(k)} dp[i]=max{f(k)} 要求 f(k)是关于k的函数 k的范围和i有关 转移方法 维护一个单调递增(减)的队列,可以在两头弹出元素,一 ...

  6. 【android开发】Android防止内存溢出浅析

    近期项目做得差点儿相同了,測试出现了一些问题,当中一个就是内存溢出问题,在三星手机上測试最easy出现内存溢出,在其它手机上,比方华为就没有发生,也是比較郁闷.这个问题在之前的公司,做项目时也遇到过, ...

  7. UIBezierPathStudyDemo

    import UIKit import XCPlayground //创建view let myView = UIView(frame:CGRectMake(0, 0, 300, 200)) //实时 ...

  8. 淘宝Refrash_token签名错误的解决办法

    最近在做淘宝相关应用,想要通过Refrash_token来延长SessionKey的授权时间,但是总是报406 sign error. 经过多次尝试和多方询问,方才知道原来淘宝给的.net SDK里面 ...

  9. 关于在Android设置全局变量随时获取context

    最实在的办法就是继承Application,在里面设置全局变量,因为Application是android的应用入口,并且运行周期贯穿整个程序运行. import android.app.Applic ...

  10. C++与正态分布

    正态分布(Normal distribution)又名高斯分布(Gaussiandistribution).若随机变量X服从一个数学期望为μ.方差为σ^2的高斯分布,记为N(μ,σ^2).其概率密度函 ...