css sprites精灵技术：Html将所有图片放在一张图片上
使用最近做的某项目常见页面作为联系素材：
分析：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;
}
这样即可实现第一张图的效果。
