css sprites精灵技术：Html将所有图片放在一张图片上

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

分析：1、切图：步骤条可以切成四种图，即黄灰、红黄、红、灰。

2、html：需要五个li标签，每个包含一个图片及文字。

css sprites精灵技术：Html将所有图片放在一张图片上

将要取得图片放到同一张图片上，从左到右标签依次命名为：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;

这样即可实现第一张图的效果。

秒客网