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

效果图如下：

代码如下：

<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. CloudStack4.2 二级镜像存储测试

    //添加二级存储{ "addimagestoreresponse": { "imagestore": { "id": "2dda4 ...

  2. windows apache vhost 403 error

    <Directory D:\workspace\ecshop> Options FollowSymLinks AllowOverride None Order deny,allow all ...

  3. Java中static的用法

    static静态,作为修饰符,最初是由c引入,一开始static表示退出一个块后依然存在的局部变量.随后,static表示不能被其他文件访问的全局变量和函数.到了C++和java,static表示属于 ...

  4. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  5. 鼠标指向GridView某列显示DIV浮动列表

    需求: 当GRIDVIEW数据列过多,不方便全部显示在同一行或者一些子信息需要鼠标指向某关键列GRIDVIEW的时候显示其子信息. 设计:先把需要显示的浮动数据一次过抓取出来.而不是鼠标指向的时候才从 ...

  6. IOS 7 Study - Displaying an Image on a Navigation Bar

    ProblemYou want to display an image instead of text as the title of the current view controlleron th ...

  7. BZOJ 4318: OSU! 期望DP

    4318: OSU! 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4318 Description osu 是一款群众喜闻乐见的休闲软件 ...

  8. Codeforces Round #310 (Div. 1) B. Case of Fugitive set

    B. Case of Fugitive Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/555/p ...

  9. 在C#中使用全局鼠标、键盘Hook

    今天,有个同事问我,怎样在C#中使用全局钩子?以前写的全局钩子都是用unmanaged C或C++写个DLL来实现,可大家都知道,C#是基于.Net Framework的,是managed,怎么实现全 ...

  10. tomcat解压war包的一点例外

    我在项目的开发过程中,发现Tomcat解压war 的一点例外.        现象如下: 使用ANT工具把web应用程序打包为war文件.然后把war文件放到tomcat的webapps,让tomca ...