一个css3流程导图

这也是公司用到的，写个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>

 

posted @ 2016-07-13 15:51  sonicwater  阅读(500)  评论(0)  编辑  收藏  举报