使用最近做的某项目常见页面作为联系素材：

分析：1、切图：步骤条可以切成四种图，即黄灰、红黄、红、灰。

2、html：需要五个li标签，每个包含一个图片及文字。

将要取得图片放到同一张图片上，从左到右标签依次命名为：step_01、step_02、step_03、step_00。

这里是step_01的Html：

<!DOCTYPE html>
<html>
<head>
    <title>step1</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<div class="content">
    <h2>在线支付</h2>
    <ul class="step">
        <li class="step_01">确认联系方式</li>
        <li>确认认证信息</li>
        <li>在线支付</li>
        <li>第三方认证</li>
        <li>成功开通</li>
    </ul>
 
    <div class="step"></div>
    <div class="foot"></div>
</div>
</body>
</html>

这里是step_01的css：

.content {
    width: 840px;
    margin: 20px auto;
}
 
.content h2 {
    background: #ececec;
    line-height: 40px;
    font-size: 11pt;
    text-indent: 1em;
    font-weight: 700;
    border-left: solid 3px #cc0000;
}
 
.step li {
    float: left;
    width: 168px;
    text-align: center;
    padding-top: 15px;
    margin-top: 30px;
    list-style: none;
    display: inline;
    background: url("../image/step_bg.png") no-repeat center -143px;
}
 
.step li.step_01 {
    background-position: center -1px; font-weight:700;
}

这样即可实现第一张图的效果。

css sprites精灵技术：Html将所有图片放在一张图片上的更多相关文章

  1. css:background-position > 精灵技术

    background-position : length || length background-position : position || position 取值: length  : 百分数 ...

  2. CSS sprites(css 精灵):将小图标整合到一张图片上

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

  3. 认识CSS中精灵技术（sprite）和滑动门

    前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片 ...

  4. CSS Sprites 原理技术介绍及其优化方法

    先期的准备工作 应对一个项目后期维护成本大的问题,我们最好的解决方案就是在开始前制定一系列的规范来限制问题的产品.好的开始是成功的一半.对于CSS Sprites,在项目开始前,我们要充分认识一个产品 ...

  5. CSS Sprites精灵图(雪碧图)

    简介 CSS精灵图,是一种网页图片应用处理方式.允许将一个页面涉及到的所有零星图片都包含到一张大图中 利用CSS的"background-image","backgrou ...

  6. 雪碧图——CSS Sprites(精灵)

    在日常开发打开文件包,打开static文件夹,有一张图片,里面融合了这个应用都会用到的小图标,其实,主要是减少应用渲染出现繁多的请求,加速页面渲染. 解决方案:使用css背景定位 icon {widt ...

  7. CSS的精灵技术

  8. css sprites拼合

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.就是把网页中一些背景图片整合拼合成一张图片中,再利用DIV CSS的 ...

  9. css sprites的原理和作用

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

随机推荐

  1. cuda(2) 矩阵乘法优化过程

    Created on 2013-8-5URL : http://blog.sina.com.cn/s/blog_a502f1a30101mjch.html@author: zhxfl转载请说明出处 # ...

  2. linux下如何执行PHP脚本

    Linux 下如何直接执行 php 脚本? 下面是部分 php 命令行参数. 用法 php [-q] [-h] [-s] [-v] [-i] [-f ] | { [args...]} -q 安静模式, ...

  3. Cleaner Robot - CodeForces 589J（搜索）

    有一个M*N的矩阵,有一个会自动清洁的机器人,这个机器人会按照设定好的程序来打扫卫生,如果当前方向前面可以行走,那么直接走,如果不可以走那么会向右转动90度,然后回归上一步判断.求机器人最多能打扫的面 ...

  4. PHP面试题三

    1.nginx使用哪种网络协议? nginx是应用层 我觉得从下往上的话 传输层用的是tcp/ip 应用层用的是http fastcgi负责调度进程 2. <? echo 'hello tush ...

  5. sql server 分组统计数据

    说明:group by是sql中对数据表中的数据进行分组的,在select列表中出现的字段必须全部出现在group by 字段中,出现在聚合函数中的字段在group by中可有可无,没有出现在sele ...

  6. Highcharts可拖动式图表

    Highcharts可拖动式图表 默认情况下,Highcharts依据给定的数据列生成图表. 浏览者是无法改动图表的. 假设浏览者须要手动调整数据节点.就须要借助第三方插件Draggable Poin ...

  7. mysql加入�管理员

    1.首先用超级管理员登录,然后点击权限button 2.点击加入�新用户,填写登录名和password,全局权限不用选,点击新建用户button 3.编辑新加入�的用户(编辑权限) 4.找到" ...

  8. WebService学习笔记系列（一）

    webservice主要是解决两个系统或者两个应用程序之间的远程调用,它提供了一种通过web方式访问的api,调用是跨语言.跨平台的. webservice的客户端与服务端进行交互的时候使用xml来传 ...

  9. linux根下目录详解及分区建议

    / 根目录    分区大小一定要充足,一般不小于5GB/bin,/usr/bin 普通用户使用命令    建议和/放一起/sbin,/usr/sbin 管理员使用命令/bin,/sbin 操作系统自身 ...

  10. python matplotlib.plot画图显示中文乱码的问题

    在matplotlib.plot生成的统计图表中,中文总是无法正常显示.在网上也找了些资料,说是在程序中指定字体文件,不过那样的话需要对plot进行很多设置,而且都是说的设置坐标轴标题为中文,有时候图 ...