[k]优雅的css

1、图片文字列表 (2016-01-25)

1.1 实现效果图如下：

1.2 代码：

html：( 代码十分优雅哦！ )

1 <ul>
2     <li class="step1">下载XXX应用</li>
3     <li class="step2">60秒在线申请</li>
4     <li class="step3">线下签约</li>
5 </ul>

View Code

css：

 1 /*reset-style*/
 2 html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,
 3 a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset,
 4 form,label,table,caption,tbody,tfoot,thead,tr,th,td {
 5     margin: 0;
 6     padding: 0;
 7 }
 8 body {
 9   font-family: "Microsoft yahei", Helvetica, Arial, sans-serif;
10   font-size: 14px;
11   line-height: 1.42857143;
12   background-color: #fff;
13 }
14 ol,ul {
15     list-style: none;
16 }
17 
18 /*本页面的样式*/
19 ul li{display:inline-block;position:relative;text-align:center;margin:10px 60px;font-size:18px;}
20 ul li:before{width:184px;height:185px;display:block;margin-bottom:20px;}
21 ul .step1:before{content:url(ico1-c.jpg);}
22 ul .step2:before{content:url(ico2-c.jpg);}
23 ul .step3:before{content:url(ico3-c.jpg);}
24 ul li:after{content:url(threeStep.jpg);position:absolute;top:82px;left:195px;}
25 ul .step3:after{content:'';}

View Code