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

分析：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. 关于yuv 的pack(紧缩格式)和planner(平面格式)格式 [转]

    关于yuv 格式 YUV 格式通常有两大类:打包(packed)格式和平面(planar)格式.前者将 YUV 分量存放在同一个数组中,通常是几个相邻的像素组成一个宏像素(macro-pixel);而 ...

  2. Centos6 编译安装局域网NTP服务器

    一.条件及环境: 1.CentOS:我用的是最新的CentOS 6.5 64位版,此教程应该也适用于RedHat 6及CentOS 6系列所有系统: 2.编译所需环境: 1 # yum -y inst ...

  3. BZOJ 2933([Poi1999]地图-区间Dp)

    2933: [Poi1999]地图 Time Limit: 1 Sec   Memory Limit: 128 MB Submit: 7   Solved: 7 [ Submit][ Status] ...

  4. UVA 6199 不定根最小树形图

    首先是最小树形图的介绍. 看这个博客.最小树形图 上面介绍的很详细了,我就讲一下这道题的题意. 首先给出一些二维点坐标,这些坐标之间构成一些有向图,根据题意,假设两个点a(x1 ,y1) ,b(x2 ...

  5. servlet中避免405错误的产生

    父类Parent(相当于HttpServlet):service方法,用于处理任务分发,doGet.doPost方法用于报错  关注的是子类Son(servlet)     目的:杜绝错误的产生 方式 ...

  6. 关于RGB转换YUV的探讨与实现

    最近在Android手机上使用相机识别条形码工作取得了比较理想的进展,自动识别功能基本完成,然而在手动识别指定条形码图片时遇到困难,由于Zxing开源Jar包识别图片的颜色编码式为YUV,而普通的图片 ...

  7. ZBar只扫描二维码/条形码

    You can add these codes for ImageScanner scanner.setConfig(0, Config.ENABLE, 0); //Disable all the S ...

  8. 格式化日期时间字符串 Get-Date -Uformat , -format

    #将字符串格式化为时间格式 $dateTimeStr = '20141231T23:59:59' $format = 'yyyyMMddTHH:mm:ss' $formatProvider = [Gl ...

  9. C# richTextBox编辑器

    附件:http://files.cnblogs.com/xe2011/CSHARP_RichTextBoxEditor.rar 完整的转到这里 http://www.cnblogs.com/xe201 ...

  10. Java为何大行其道

    Java为何大行其道 --专訪传智播客冯威老师 冯威老师,多年来一直从事软件开发和教学工作.先后担任过项目经理.软件架构师.软件开发project师.系统架构师.讲师等.具备丰富的软件开发经验和教学经 ...