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

效果图如下：

代码如下：

<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. PropertiesUtil 读取配置文件工具类

    package org.konghao.basic.util; import java.io.FileInputStream; import java.io.FileNotFoundException ...

  2. （1） css的核心基础

     css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...

  3. iOS 消息推送实现 APNS

    本文只是记录一下如何在自己的电脑上配置APNS推送环境,其它的如推送的原理,流程什么的这里就不写了. 一. 去Apple 开发者中心,创建App ID.注意App ID不能使用通配符.并注意添加Pus ...

  4. Java学习笔记之深入理解引用

    引言:Java中数据传递的方式,除了基本数据类型是按照值传递,其它类型全部是按照引用传递,这和C++有很大区别,但是很多网上文章都解释的不清楚,甚至是错误的,在查阅资料之后,下面整理出一个比较容易理解 ...

  5. Codeforces Round #313 (Div. 1) A. Gerald's Hexagon 数学题

    A. Gerald's Hexagon Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/559/p ...

  6. 【JavaScript】关于js的一些理解

    嵌套函数即作用域链:嵌套函数即闭包 函数表达式即延迟执行 匿名函数----------->实现块级作用域 call会切换到调用的对象参数环境.

  7. spring mvc 3.0 ModelAndView模型视图类

    见名知意,从名字上我们可以知道ModelAndView中的Model代表模型,View代表视图.即,这个类把要显示的数据存储到了Model属性中,要跳转的视图信息存储到了view属性.我们看一下Mod ...

  8. /proc/sys/vm/ 内存参数

    linux下proc里关于磁盘性能的参数 http://blog.csdn.net/eroswang/article/details/6126646  我们在磁盘写操作持续繁忙的服务器上曾经碰到一个特 ...

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

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

  10. SQL Server 中的事务和锁（三）-Range S-U,X-X 以及死锁

    在上一篇中忘记了一个细节.Range T-K 到底代表了什么?Range T-K Lock 代表了在 SERIALIZABLE 隔离级别中,为了保护范围内的数据不被并发的事务影响而使用的一类锁模式(避 ...