<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>process-example</title>
<style>
/* reset.css */
body {
font-size: 12px !important;
font-family: 'Microsoft Yahei' , 'proxima-nova' , helvetica, arial;
-webkit-overflow-scrolling: touch;
}
input {
-webkit-appearance: none;
resize: none;
}
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5 {
font-style: normal;
font-weight: normal;
}
img {
border: 0;
display: block;
border: 0;
}
.clearfix:after {
content: '' ;
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
color:
}
a:hover {
color:
text-decoration: none;
}
ul,
ol {
list-style: none;
}
a {
outline: none;
}
/* 去掉 input 右边上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
/* 项目样式 */
.process-status-new {
width: 100%;
background-color:
height: 46px;
padding-top: 24px;
}
.process-status-new ul {
margin: 0 36px;
border-top: 1px solid
height: 45px;
position: relative;
}
.process-status-new ul li {
position: absolute;
float : left;
width: 33.3%;
top: -12px;
}
.process-status-new ul .p-gjj {
left: 0;
}
.process-status-new ul .p-basic {
left: 33.3%;
}
.process-status-new ul .p-edu {
left: 66.6%;
}
.process-status-new ul .p-ok {
left: 100%;
}
.process-status-new .p-n-2 .p-gjj span.l,
.process-status-new .p-n-3 .p-gjj span.l,
.process-status-new .p-n-4 .p-gjj span.l {
display: block;
}
.process-status-new ul li span.l {
position: absolute;
left: 0;
top: 11px;
width: 100%;
z-index: 1;
display: none;
height: 1px;
background-color:
}
.process-status-new ul li .box {
width: 88px;
position: relative;
margin-left: -44px;
z-index: 2;
}
.process-status-new ul li .box .icon span {
width: 17px;
height: 17px;
border: 2px solid
display: block;
border-radius: 100%;
background-position: center;
background-repeat: no-repeat;
}
.process-status-new .p-n-2 .p-gjj .icon span,
.process-status-new .p-n-3 .p-gjj .icon span,
.process-status-new .p-n-4 .p-gjj .icon span {
background-image: url(http://r.51gjj.com/image/static/20160518-bank-icon-cur2.png);
background-size: 12px 12px;
background-color:
border: 2px solid
}
.process-status-new ul li .box .icon {
width: 21px;
height: 21px;
padding: 1px;
background-color:
margin: 0 auto;
}
.process-status-new .p-n-2 .p-gjj p,
.process-status-new .p-n-3 .p-gjj p,
.process-status-new .p-n-4 .p-gjj p {
color:
}
.process-status-new ul li .box p {
color:
font-size: 12px;
padding-top: 6px;
line-height: 18px;
text-align: center;
}
</style>
</head>
<body>
<div class="process-status-new" >
<ul class="p-n-2" >
<li class="p-gjj" > <span class="l" ></span>
<div class="box" >
<div class="icon" ><span></span></div>
<p>步骤一</p>
</div>
</li>
<li class="p-basic" > <span class="l" ></span>
<div class="box" >
<div class="icon" ><span></span></div>
<p>步骤二</p>
</div>
</li>
<li class="p-edu" > <span class="l" ></span>
<div class="box" >
<div class="icon" ><span></span></div>
<p>步骤三</p>
</div>
</li>
<li class="p-ok" >
<div class="box" >
<div class="icon" ><span></span></div>
<p>步骤四</p>
</div>
</li>
</ul>
</div>
</body>
</html>
复制代码
