使用css绘制按步骤显示进度条
程序员文章站
2022-06-07 11:06:25
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style lang="scss" scoped>
.top {
display: block;
background-color: black;
margin: 0 auto;
width: 600px;
margin-top: 80px;
text-align: center;
}
.circle {
position: relative;
box-sizing: border-box;
width: 36px;
height: 36px;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.lineBg {
width: 210px;
height: 8px;
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.5);
}
.step {
font-size: 18px;
}
.lineBg {
width: 210px;
height: 8px;
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.5);
}
.step {
font-size: 18px;
}
.line {
margin: 0;
width: 105px;
display: inline-block;
height: 5px;
}
.mid {
padding-top: 10px;
padding-bottom: 10px;
width: 550px;
margin: 0 auto;
}
.end {
width: 560px;
margin: 0 auto;
color: white;
font-size: 14px;
}
</style>
</head>
<body>
<div class="top">
<div class="mid">
<div style="float:left; background:#fff; border: 2px solid #3aba6b;" class="circle">
<div style="color :#3aba6b;" class="step">1</div>
</div>
<div class="lineBg">
<div style="background: #3aba6b;" class="line 1"></div>
<div style="background: #3aba6b;" class="line 2"></div>
</div>
<div style="display: inline-flex; background:#3aba6b; border: 2px solid #fff;" class="circle">
<div style="color: #fff;" class="step">2</div>
</div>
<div class="lineBg">
<div style="background: #3aba6b;" class="line 3"></div>
<div style="background: #3aba6b;" class="line 4"></div>
</div>
<div style="float:right; background:#fff; border: 2px solid #fff;" class="circle">
<div style="color: #3aba6b;" class="step">3</div>
</div>
</div>
<div class="end">
<span style="float:left;">已完成</span>
<span>进行中</span>
<span style="float:right">待完成</span>
</div>
</div>
</body>
</html>
我总是很坦诚，下面是我的实现结果