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

效果图如下：

代码如下：

<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）面试题25：二叉树中和为某一值的路径

    题目: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 二叉树结点的定义: struct TreeNode ...

  2. Codeforces Gym 100231L Intervals 数位DP

    Intervals 题目连接: http://codeforces.com/gym/100231/attachments Description Start with an integer, N0, ...

  3. cdoj 1150 排名表 拓扑排序

    排名表 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1150 Descrip ...

  4. openlayers3 在地图上叠加WFS查询矢量图层

    随着终端设备计算能力的加强,用户在使用地图的时候也须要越来越多的交互效果. 比方如今非常火的室内导航,为了获得好的用户体验,就须要当用户单击某一商店的时候该商店的颜色能对应的变化.这就须要叠加矢量图层 ...

  5. 窗口界面编程之一：VB实现简单异形窗口

    一.运行效果图(在Win8里的运行效果,在XP里运行就不能体现出来,因为我使用的XP的界面效果) 二.编译环境:Visual Basic 6.0 (SP6) 三.实现原理:通过区域合并 四.使用API ...

  6. iOS-swift环形进度指示器+图片加载动画

    demo.gif 如图,这个动画的是如何做的呢? 分析: 1.环形进度指示器,根据下载进度来更新它 2.扩展环,向内向外扩展这个环,中间扩展的时候,去掉这个遮盖 一.环形进度指示器 1.自定义View ...

  7. java追加文件的几种方式

    import java.io.BufferedWriter; import java.io.FileOutputStream; import java.io.FileWriter; import ja ...

  8. iOS开发——使用技术OC篇&简单九宫格锁屏功能的实现与封装

    简单九宫格锁屏功能的实现与封装 首先来看看最后的实现界面. 在这开始看下面的内容之前希望你能先大概思考活着回顾一下如果 你会怎么做,只要知道大概的思路就可以. 由于iphone5指纹解锁的实现是的这个 ...

  9. php与mysql的链接到底用mysql 还是mysqli，pdo

    参考:http://php.net/manual/en/mysqlinfo.api.choosing.php

  10. Advanced Awk for Sysadmins

    转:http://www.linuxforu.com/2011/06/advanced-awk-for-sysadmins/ By Vishal Bhatia on June 1, 2011 in H ...