標籤：
這也是公司用到的，寫個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>
一個css3流程導圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
