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

分析：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. stl binary search

    stl binary search */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola,&q ...

  2. 让你的Ubuntu也能像Windows那样显示网速和CPU温度

    致力于Linux桌面操作系统的平民化,一直强迫自己完全在Ubuntu系统下进行日常的电脑使用,但是用长了时间的Windows,还是有些习惯改不过来,比如只要在下载或者看在线视频的时候就会不自觉关注网速 ...

  3. Kbuild文件

    3 Kbuild文件 大部分内核中的Makefile都是使用Kbuild组织结构的Kbuild Makefile.这章将介绍Kbuild Makefile的语法. 对于Kbuild文件名来讲,Kbui ...

  4. Apache Commons 工具类介绍及简单使用

    转自:http://www.cnblogs.com/younggun/p/3247261.html Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.下 ...

  5. PHP技术开发微信公众平台

    这篇文章主要介绍了微信公众平台的两种模式(编辑模式和开发模式)顾名思义编辑模式就是写普通的功能,开发模式具有更多的功能,下面主要是针对开发模式做介绍,需要的朋友可以参考下 下面通过图文并茂的方式介绍微 ...

  6. 20169210《Linux内核原理与分析》第九周作业

    第一部分:实验 首先还是网易云课堂的学习,这次的课程是可执行程序的装载. 预处理.编译和链接: 可执行程序是怎么来的 以c语言代码为例的话,经过预处理,编译成汇编代码,再汇编成目标码再链接可执行文件. ...

  7. [React] React Fundamentals: Build a JSX Live Compiler

    we want to have the ability to write JSX and see the output live in the browser. <!doctype html&g ...

  8. HDU2088JAVA

    Hot~~招聘——巴卡斯(杭州),亚信科技,壹晨仟阳(杭州) Box of Bricks Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: ...

  9. android开发之PreferenceScreen使用详解

    是在惭愧,学习android也有一段时间了,今天才是第一次接触PreferenceScreen.记录下来,与大家分享. 本文参考:http://lovezhou.iteye.com/blog/1020 ...

  10. linux中的网络通信指令 分类： 学习笔记 linux ubuntu 2015-07-06 16:02 134人阅读 评论(0) 收藏

    1.write write命令通信是一对一的通信,即两个人之间的通信,如上图. 效果图 用法:write <用户名> 2.wall wall指令可将信息发送给每位同意接收公众信息的终端机用 ...