有网购习惯的朋友可能会注意到一个快递进度条功能，用来标识物流信息。 非常直观的了解货物当前的位置，下面就分享一个类似的效果。 代码实例如下: [HTML] 纯文本查看 复制代码运行代码 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.steps {
width: 760px;
height: 95px;
position: relative;
margin: 0 auto;
}
.first {
position: absolute;
width: 230px;
height: 95px;
position: absolute;
top: 0;
left: 0;
}
.first .big-circle {
width: 33px;
height: 33px;
border-radius: 50%;
background: #DBD8D8;
position: absolute;
left: 60px;
top: 31px;
text-align: center;
}
.first .min-circle, .second .min-circle, .third .min-circle, .fourth .min-circle {
width: 23px;
height: 23px;
border-radius: 50%;
display: inline-block;
margin-top: 5px;
text-align: center;
line-height: 23px;
color: #fff;
font-size: 14px;
font-weight: bold;
background: #999;
}
.round_active {
background: #02994C !important;
}
.first .title {
position: absolute;
top: 0;
left: 50px;
line-height: 24px;
color: #8A8A8A;
}
.first .tame {
position: absolute;
left: 5px;
bottom: 0;
color: #A19F9D;
font-size: 14px;
}
.first .big-line {
width: 186px;
height: 10px;
background: #DDDEDE;
position: absolute;
left: 88px;
top: 42px;
text-align: center;
z-index: 999;
}
.first .min-line, .second .min-line, .third .min-line, .fourth .min-line {
width: 190px;
height: 4px;
margin-top: 3px;
background: #999;
}
.line_active {
background: #02994C !important;
}
.second {
width: 210px;
position: absolute;
top: 0;
left: 230px;
height: 95px;
}
.second .big-circle, .third .big-circle, .fourth .big-circle {
width: 33px;
height: 33px;
border-radius: 50%;
background: #DBD8D8;
position: absolute;
left: 43px;
top: 31px;
text-align: center;
}
.second .title, .fourth .title, .third .title {
position: absolute;
top: 0;
left: 30px;
line-height: 24px;
color: #8A8A8A;
}
.second .tame, .third .tame, .fourth .tame {
position: absolute;
left: -10px;
bottom: 0;
color: #A19F9D;
font-size: 14px;
}
.second .big-line, .third .big-line, .fourth .big-line {
width: 186px;
height: 10px;
background: #DDDEDE;
position: absolute;
left: 71px;
top: 42px;
text-align: center;
z-index: 999;
}
.third {
width: 210px;
position: absolute;
top: 0;
left: 440px;
height: 95px;
}
.fourth {
width: 210px;
position: absolute;
top: 0;
left: 648px;
height: 95px;
}
</style>
</head>
<body>
<div class="steps">
<div class="first">
<div class="title">
拍下商品
</div>
<div class="big-circle">
<div class="min-circle round_active">
√
</div>
</div>
<div class="tame">
2016年8月30日18:11:25
</div>
<div class="big-line">
<div class="min-line line_active"></div>
</div>
</div>
<div class="second">
<div class="title">
付款到支付宝
</div>
<div class="big-circle">
<div class="min-circle round_active">
√
</div>
</div>
<div class="tame">
2016年8月30日18:11:25
</div>
<div class="big-line">
<div class="min-line line_active"></div>
</div>
</div>
<div class="third">
<div class="title">
卖家发货
</div>
<div class="big-circle">
<div class="min-circle round_active">
√
</div>
</div>
<div class="tame">
2016年8月30日18:11:25
</div>
<div class="big-line">
<div class="min-line"></div>
</div>
</div>
<div class="fourth">
<div class="title">
确认收货
</div>
<div class="big-circle">
<div class="min-circle">
√
</div>
</div>
<div class="tame">
2016年8月30日18:11:25
</div>
</div>
</div>
</body>
</html>
上面的代码实现我们的基本要求，下面介绍一下它的实现过程。 一.代码注释: [CSS] 纯文本查看 复制代码 .steps {
width: 760px;
height: 95px;
position: relative;
margin: 0 auto;
}
快递进度效果的容器，设置其为相对定位，那么它的定位子元素位移以它为参考。 通过margin: 0 auto将其设置为水平居中。 [CSS] 纯文本查看 复制代码 .first {
position: absolute;
width: 230px;
height: 95px;
position: absolute;
top: 0;
left: 0;
}
快递进度的第一个阶段。 绝对定位，位移以它的steps父元素为参考。 [CSS] 纯文本查看 复制代码 .first .big-circle {
width: 33px;
height: 33px;
border-radius: 50%;
background: #DBD8D8;
position: absolute;
left: 60px;
top: 31px;
text-align: center;
}
定义较大灰色的圆形区域。 通过绝对定位将其放置于一个合适区域。 [CSS] 纯文本查看 复制代码 .first .min-circle, .second .min-circle, .third .min-circle, .fourth .min-circle {
width: 23px;
height: 23px;
border-radius: 50%;
display: inline-block;
margin-top: 5px;
text-align: center;
line-height: 23px;
color: #fff;
font-size: 14px;
font-weight: bold;
background: #999;
}
定义较小深灰色的原型区域。 通过display: inline-block将div元素设置为内联块级元素，这样父元素的text-align: center可以将其设置为居中。 [CSS] 纯文本查看 复制代码 .round_active {
background: #02994C !important;
}
元素添加此样式类之后，能够优先将背景色设置为#02994C（绿色）。 [CSS] 纯文本查看 复制代码 .first .title {
position: absolute;
top: 0;
left: 50px;
line-height: 24px;
color: #8A8A8A;
}
通过绝对定位，将标题设置于顶部。 [CSS] 纯文本查看 复制代码 .first .tame {
position: absolute;
left: 5px;
bottom: 0;
color: #A19F9D;
font-size: 14px;
}
将时间通过绝对定位放置于底部。 [CSS] 纯文本查看 复制代码 .first .big-line {
width: 186px;
height: 10px;
background: #DDDEDE;
position: absolute;
left: 88px;
top: 42px;
text-align: center;
z-index: 999;
}
设置较粗灰色的横线。 通过绝对定位将其放置于一个恰当的位置。 [CSS] 纯文本查看 复制代码 .first .min-line, .second .min-line, .third .min-line, .fourth .min-line {
width: 190px;
height: 4px;
margin-top: 3px;
background: #999;
}
快递流程没有完成时，较细深灰色的横线。 [CSS] 纯文本查看 复制代码 .line_active {
background: #02994C !important;
}
元素添加此样式类之后，能够优先将背景色设置为#02994C（绿色）。 二.相关阅读：
（1）.相对定位参阅CSS position:relative 相对定位一章节。 （2）.绝对定位参阅CSS position:absolute 绝对定位一章节。 （3）.border-radius参阅CSS3 border-radius一章节。 （4）.!important参阅CSS !important一章节。 | 
