这也是公司用到的，写个demo出来分享
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>流程导图</title>
6 <style>
7 .warpper{
8 width: 882px;
9 margin: 50px auto;
10 text-align: center;
11 position: relative;
12 }
13 .progressbar {
14 margin-bottom: 30px;
15 overflow: hidden;
16 counter-reset: step;
17 }
18 .progressbar li {
19 list-style-type: none;
20 color: #33abff;
21 text-transform: uppercase;
22 font-size: 16px;
23 width: 25%;
24 float: left;
25 position: relative;
26
27
28 }
29
30 .progressbar li:before {
31 content: ‘ ‘;
32 width: 92px;
33 height:80px;
34 line-height: 80px;
35 display: block;
36 font-size: 10px;
37 color: #333;
38 background: white;
39 border-radius: 5px;
40 margin: 0 auto 24px auto;
41 border:1px solid #33abff;
42
43 background:#fff url(images/g.png) center center no-repeat;
44 background-size:50%;
45 }
46
47 .progressbar li:after {
48 content: ‘‘;
49 width: 100%;
50 height: 1px;
51 background: #33abff;
52 position: absolute;
53 left: -50%;
54 top: 40px;
55 z-index: -1;
56 }
57
58 .progressbar li:first-child:after {
59 /*connector not needed before the first step*/
60 content: none;
61 }
62 </style>
63 </head>
64 <body>
65 <div class="warpper">
66 <ul class="progressbar">
67 <li>扫我的二维码</li>
68 <li>分享给好友或朋友圈</li>
69 <li>好友注册葛优躺</li>
70 <li>邀请好友成功</li>
71 </ul>
72 </div>
73 </body>
74 </html>
时间： 2024-10-14 08:58:50