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

分析：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. Kth Ancestor 第k个祖先问题

    题目出处 这道题目出自hackerrank的8月月赛的第三题. 题目大意: 先给出一棵树 之后有三种操作分别为:加边,查询,和删除一个节点 查询的时候要给出任意节点x的第k个祖先 每组数据有t个cas ...

  2. 【转】谁说Vim不是IDE？（一）

    谁说Vim不是IDE?(一)   话说操作系统.编程语言和编辑器似乎是程序员永恒的吐槽话题,技术发展了几十年,大家讨论起这几个“之争”还是充满愤怒.津津乐道.有人描述过Emacs和VI程序员,大家沿着 ...

  3. div border-radius

    可以画个1/4之一的圆也可以画整个圆 <html> <style type="text/css"> div{ background-color: #000; ...

  4. 在线App开发平台——应用之星傻瓜式开发平台

    随着智能手机及APP应用程序的普及,越来越多的企业和个人意识到APP的营销价值,出于对技术的敬畏,很多企业下意识认为开发APP是一个有难度的技术活,所以很多时候有心无力,也担心APP的后续的技术支持. ...

  5. mahout算法源码分析之Collaborative Filtering with ALS-WR （四）评价和推荐

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 首先来总结一下 mahout算法源码分析之Collaborative Filtering with AL ...

  6. Android模拟器报"Failed To Allocate memory 8"错误的解决办法

    此错误是我们在允许AVD时,选择了默认的AVD插件所致. 解决方法:减少分配的内存大小.修改AVD的config.ini配置文件,将选项“hw.ramSize=1024”从1024改为256.

  7. storm的acker机制理解

    转载请注明原创地址http://www.cnblogs.com/dongxiao-yang/p/6142356.html Storm 的拓扑有一些特殊的称为"acker"的任务,这 ...

  8. JVM经常使用的调优參数

    -Xms512m -Xmx1024m -XX:MaxPermSize=1204m -XX:+UseConcMarkSweepGC -XX:+CMSClassUnloadingEnabled -XX:+ ...

  9. [置顶] sql 向另一个表导数据

    1.如果目的表已经存在: 这两个表结构必须一致 insert into table1 select * from tabel2 2.如果目的表不存在: 这个类似与克隆表 select * into t ...

  10. nginx lua 开发笔记

    获取 在lua代码中获取 location 正则的参数对应的变量 // location location ~/lua_http_2/(\w*.+) { } // lua local vars=ngx ...