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

分析：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. debmirror镜像站

    如何建立一个Debian镜像网站呢?在Debian的官方网站已经有专门的介绍: http://www.debian.org/mirror/ftpmirror 这是基于rsync软件的方法,网页也提供了 ...

  2. Android开发之50个常见实用技巧——活用布局

    第一章.活用布局 Hack1. 使用weight属性实现视图的居中显示  ①合用weightSum属性和layout-weight属性 解决问题,如:居中显示按钮,并占据父视图的50%: 代码如: & ...

  3. JavaScript实现拖拽预览，AJAX小文件上传

    本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="bord ...

  4. 大型Web应用运行时 PHP负载均衡指南

    如今,“大型服务器”模式的时代已经过去,我们在运行一些大的Web应用时候,可以使用各种各样的负载均衡技术,这是一种更可行的方法,将使硬件成本降至最低. 过去当运行一个大的web应用时候意味着需要运行一 ...

  5. Java或web中解决所有路径问题

    Java开发中使用的路径,分为两种:绝对路径和相对路径.归根结底,Java本质上只能使用绝对路径来寻找资源.所有的相对路径寻找资源的方法,都不过是一些便利方法.不过是API在底层帮助我们构建了绝对路径 ...

  6. [AngularJS] Extract predicate methods into filters for ng-if and ng-show

    Leaking logic in controllers is not an option, filters are a way to refactor your code and are compa ...

  7. Android获取设备隐私 忽略6.0权限管理

    1.前言 (1).由于MIUI等部分国产定制系统也有权限管理,没有相关api,故无法判断用户是否允许获取联系人等隐私.在Android 6.0之后,新增权限管理可以通过官方api判断用户的运行状态: ...

  8. 详解Android动画之Tween Animation

    前面讲了动画中的Frame动画,今天就来详细讲解一下Tween动画的使用. 同样,在开始实例演示之前,先引用官方文档中的一段话: Tween动画是操作某个控件让其展现出旋转.渐变.移动.缩放的这么一种 ...

  9. plupload使用指南（转）

    转自http://www.cnblogs.com/2050/p/3913184.html 现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SWFUpload显然就有点过时了,毕 ...

  10. majikan