联系客服:400-805-1963

html5+css3+js开发APP实例教程1 -- 文字列表
更新:HHH   时间:2023-1-7


不多说,直接上实例。

*************************

列表一:

 

  1. <div class="tempbox"> 
  2.   <ul id="pwslist"> 
  3.       <li><span class="more"></span>刘强东被迫卖地促销为D轮融资</li> 
  4.       <li><span class="more"></span>传京东商城出售自建仓库地块</li> 
  5.       <li><span class="more"></span>传亚马逊即将推出10英寸版K</li> 
  6.       <li><span class="more"></span>网购一个差评引发血案 健全</li> 
  7.       <li><span class="more"></span>夏日疯狂网购 傲游浏览器3为</li> 
  8.  
  9.       <li><span class="time">2012.12.22</span>电商业人才饥渴:工作1年最高</li> 
  10.       <li><span class="time">2012.12.22</span>一嗨租车携手京东商城 推租车</li> 
  11.       <li><span class="time">2012.12.22</span>金山网络:律师称金山网购保</li> 
  12.       <li><span class="time">2012.12.22</span>小狗携京东商城强力出击:定制</li> 
  13.       <li><span class="time">2012.12.22</span>网购:不×××成潜规则 税收漏</li> 
  14.   </ul> 
  15. </div> 

 

  1. #pwslist li{ 
  2.   height: 40px; line-height: 40px; 
  3.   border-bottom: 1px solid #eee; 
  4.   text-indent: 10px; 
  5.   background: #f2f3f5; 
  6.   background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
  7.    
  8. } 
  9. #pwslist li:hover{ 
  10.  background: #d6f0ff; 
  11. } 
  12. #pwslist li span.more{ 
  13.   width: 30px; 
  14.  height: 40px; 
  15.   display: block; 
  16.   float: right; 
  17.   background: url(1.png) no-repeat center; 
  18. } 
  19. #pwslist li span.time{ 
  20.   height: 40px; 
  21.   padding-right: 10px; 
  22.  display: block; 
  23.   float: right; 
  24.   font-size: 12px; 
  25.  color: #ccc; 
  26. } 

 

列表二

 

  1. <div class="tempbox"> 
  2.   <ul class="aboutlist"> 
  3.       <li><span class="more"></span>关于我们</li> 
  4.       <li><span class="more"></span>更多应用</li> 
  5.   </ul> 
  6.   <ul class="aboutlist"> 
  7.       <li>意见反馈</li> 
  8.       <li>清除缓存</li> 
  9.       <li><span class="more"></span>流畅模式</li> 
  10.       <li><span class="more"></span>喜欢?评个5分吧</li> 
  11.   </ul> 
  12.   <ul class="aboutlist"> 
  13.       <li class="radius5"><span class="more"></span>注销登陆</li> 
  14.   </ul> 
  15. </div> 

 

  1. .aboutlist{padding: 10px;} 
  2. .aboutlist li{ 
  3.   height: 40px; line-height: 40px; 
  4.   border-bottom: 1px solid #eee; 
  5.   text-indent: 10px; 
  6.   background: #f2f3f5; 
  7.   background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
  8.    
  9. } 
  10. .aboutlist li:first-child{ 
  11.   border-radius:5px 5px 0px 0px; 
  12. } 
  13. .aboutlist li:last-child{ 
  14.  border-radius:0px 0px 5px 5px; 
  15. } 
  16.  
  17. .aboutlist li:hover{ 
  18.  background: #d6f0ff; 
  19. } 
  20. .aboutlist li span.more{ 
  21.   width: 30px; 
  22.  height: 40px; 
  23.   display: block; 
  24.   float: right; 
  25.   background: url(1.png) no-repeat center; 
  26. } 
  27. .aboutlist li.radius5{ 
  28.   border-radius:5px; 
  29. } 

 

列表三

  1. <div class="tempbox"> 
  2.   <ul class="listico"> 
  3.       <li><span class="ico ico1"></span><span class="more"></span>关于我们</li> 
  4.       <li><span class="ico ico2"></span><span class="more"></span>更多应用</li> 
  5.   </ul> 
  6.   <ul class="listico"> 
  7.       <li><span class="ico ico1"></span><span class="more"></span>意见反馈</li> 
  8.       <li><span class="ico ico1"></span><span class="more"></span>清除缓存</li> 
  9.       <li><span class="ico ico1"></span><span class="more"></span>流畅模式</li> 
  10.       <li><span class="ico ico1"></span><span class="more"></span>喜欢?评个5分吧</li> 
  11.   </ul> 
  12.   <ul class="listico"> 
  13.       <li class="radius5"><span class="ico ico3"></span><span class="more"></span>注销登陆</li> 
  14.   </ul> 
  15. </div> 

 

  1. .listico{padding: 10px;} 
  2. .listico li{ 
  3.   height: 40px; line-height: 40px; 
  4.   border-bottom: 1px solid #eee; 
  5.   background: #f2f3f5; 
  6.   background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
  7.    
  8. } 
  9. .listico li:first-child{ 
  10.  border-radius:5px 5px 0px 0px; 
  11. } 
  12. .listico li:last-child{ 
  13.  border-radius:0px 0px 5px 5px; 
  14. } 
  15.  
  16. .listico li:hover{ 
  17.  background: #d6f0ff; 
  18. } 
  19. .listico li span.more{ 
  20.   width: 30px; 
  21.  height: 40px; 
  22.   display: block; 
  23.   float: right; 
  24.   background: url(1.png) no-repeat center; 
  25. } 
  26. .listico li span.ico{ 
  27.  width: 14px; 
  28.  height: 20px; 
  29.   margin: 10px; 
  30.   display: block; 
  31.   float: left; 
  32.  background-size: 14px; 
  33. } 
  34. .listico li span.ico1{background: url(brainstorming.png) no-repeat center;} 
  35. .listico li span.ico2{background: url(brand.png) no-repeat center;} 
  36. .listico li span.ico3{background: url(comment.png) no-repeat center;} 
  37.  
  38.  
  39. .listico li.radius5{ 
  40.   border-radius:5px; 
  41. } 

***************************************

DEMO

×××:

***************************************

返回移动开发教程...