为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。

　两个小例子：

  1. 淘宝首页的侧栏图

    • 代码

       <!DOCTYPE html>
      
 <html lang="en">
      
 <head>
      
     <meta charset="UTF-8">
      
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
      
     <style>
      
      blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
      
     margin: 0;
      
     padding: 0;
      
 }

 h3 {
      
     display: block;
      
     margin: 0;
      
     padding: 0;
      
 }
      
 .cat {
      
     position: relative;
      
     width: 150px;
      
     background: #f8f8f8;
      
     border: 1px solid #bbb;
      
 }

 ol, ul {
      
     list-style: none;
      
 }

 li{
      
     z-index: 2;/*设置元素的堆叠顺序,初始为0,2表示优先级更高*/
      
     position: relative;/*相对定位*/
      
     display: block;/*规定元素应该生成的框的类型,此元素将显示为块级元素*/
      
     height: 30px;
      
     line-height: 30px;
      
     overflow: hidden;/*内容溢出元素框时发生的事情*/
      
     margin: 1px 10px 0;/*元素的所有外边距*/
      
     vertical-align: bottom;/*元素的对齐方式*/
      
     border-bottom: 1px solid #dedede;
      
 }

 li h3 {
      
     font-size: 14px;
      
     font-weight: 400;
      
 }

 li i {
      
     display: inline;
      
     float: left;
      
     margin: 3px 10px 0 0;
      
     height: 24px;
      
     width: 30px
      
 }

 .cat i{
      
 background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg )
      
 }
      
 .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>
      
     <title>Document</title>

 </head>
      
 <body>
      
         <div class="cat">
      
                 <ul>
      
                     <li class="cat-1">
      
                         <i></i>
      
                         <h3>服装内衣</h3>
      
                     </li>
      
                     <li class="cat-2">
      
                         <i></i>
      
                         <h3>鞋包配饰</h3>
      
                     </li>
      
                     <li class="cat-3">
      
                         <i></i>
      
                         <h3>户外运动</h3>
      
                     </li>
      
                     <li class="cat-4">
      
                         <i></i>
      
                         <h3>珠宝手表</h3>
      
                     </li>
      
                     <li class="cat-5">
      
                         <i></i>
      
                         <h3>手机数码</h3>
      
                     </li>
      
                     <li class="cat-6">
      
                         <i></i>
      
                         <h3>家电办公</h3>
      
                     </li>
      
                     <li class="cat-7">
      
                         <i></i>
      
                         <h3>护肤彩妆</h3>
      
                     </li>
      
                     <li class="cat-8">
      
                         <i></i>
      
                         <h3>母婴用品</h3>
      
                     </li>
      
                 </ul>
      
             </div>
      
 </body>
      
 </html>

      效果：

      雪碧图：

  2. 登录页面：

代码：

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style>

 *{margin:0;padding:0;}

 .inner{width:190px;

     background-color:#d5f4f5;

     padding:10px 20px;}

 .tp{

     width:190px;

     height:30px;

     text-indent:20px;

 }

 input[type="password"]{

     margin-top:10px;

 }

 p{

     font-size:12px;

     margin-top:10px;

     overflow:hidden;

 }

 p input{

     vertical-align:top;

     margin-right:4px;

 }

 p a{

     ext-decoration:none;

     float:right;

 }

 input[type="button"]{

     width:190px;

     height:37px;

     border:0;

     margin-top:15px;

     cursor:pointer;

 }

 #login{

     background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);}

 #enroll{

     background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) 0 -37px;}

 hr{

     margin-top:20px;

     color:#f5f5ef;

 }

 </style>

 </head>

 <body>

     <div class="inner">

         <form>

             <input class="tp" type="text" placeholder="邮箱/手机号/用户名" />

             <input class="tp" type="password" placeholder="请输入密码" />

             <p>

                 <input type="checkbox" />下次自动登录<a href="javascript:;">忘记密码?</a>

             </p>

             <input id="login" type="button">

             <hr />

             <input id="enroll" type="button">

         </form>

     </div>

 </body>

 </html>

　　效果图：

雪碧图：http://img.mukewang.com/539a972b00013e9102280177.jpg

　　

　　

CSS Sprite雪碧图的更多相关文章

  1. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  2. CSS Sprite雪碧图的应用

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

  3. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  4. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  5. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  6. Css Sprite(雪碧图、精灵图)<图像拼合技术>

    一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...

  7. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  8. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  9. Sprite(雪碧图)的应用

    雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的 ...

随机推荐

  1. 二十三种设计模式之原型模式的C#实现

    原型模式就是通过拷贝快速创建一个新的对象 本例UML如图 ColorBase [Serializable] public abstract class ColorBase { public int R ...

  2. [Linux]返回被阻塞的信号集

    一.概述 在另一篇实例说到,进程可以屏蔽它不想接收的信号集. 事实上这些被屏蔽的信号只是阻塞在内核的进程表中,因为他们不能递送给进程,所以状态是未决的(pending). 利用sigpending函数 ...

  3. 20175226 2018-2019-2 《Java程序设计》第六周学习总结

    20175226 2018-2019-2 <Java程序设计>第六周学习总结 教材学习内容总结 内部类与异常类 内部类:Java支持在一个类中定义另一个类(可以是static类) 外嵌类的 ...

  4. C# 高级编程03----细节内容

    一.名称空间 1.C#使用Using关键字可以列出所需类的名称控件. 它和C/C++ 中的#include不一样.using语句并没有在这些文件之间建立物理连接 2.使用using给名称空间指定别名 ...

  5. Python学习笔记十二

    HTML全称:Hyper Text Markup Language超文本标记语言 不是编程语言 HTML使用标记标签来描述网页 2.  HTML标签 开始标签,结束标签.  例如:<html&g ...

  6. 转导推理——Transductive Learning

    在统计学习中,转导推理(Transductive Inference)是一种通过观察特定的训练样本,进而预测特定的测试样本的方法.另一方面,归纳推理(Induction Inference)先从训练样 ...

  7. 实例分析ASP.NET在MVC5中使用MiniProfiler监控MVC性能的方法 

    这篇文章主要为大家详细介绍了ASP.NET MVC5使用MiniProfiler监控MVC性能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 MiniProfiler ,一个简单而有效的迷你剖析器 ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. 20175305张天钰《java程序设计》第八周学习总结

    <java程序设计>第八周学习总结 第十五章 泛型与集合框架 一.知识点学习 1.String类 1.String类不可以有子类. 2.用户无法输出String对象的引用,输出的是字符序列 ...

  10. Android进阶：一、日志打印和保存策略

    前言: 项目开始没有做好日志统计工作,每次有问题后端都得找前端对接,严重影响工作效率.最近特地在项目中加上日志保存策略,在此分享,供需要的人学习. 一.更详细的日志信息 既然决定自定义一个log,那我 ...