网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线：028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

查看费用明细

建站知识

当前位置：首页 > 建站知识

html5+css3+js开发APP实例教程1--文字列表

不多说，直接上实例。

成都创新互联是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十多年时间我们累计服务了上千家以及全国政企客户，如雨棚定制等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞赏。

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

列表一：

html5+css3+js开发APP实例教程1 -- 文字列表

 

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

 

  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. } 

 

列表二

html5+css3+js开发APP实例教程1 -- 文字列表

 

  1.  
  2.    
  3.       
  4. 关于我们
    5.  
  5.       
  6. 更多应用
    7.  
  7.    
  8.    
  9.       
  10. 意见反馈
    11.  
  11.       
  12. 清除缓存
    13.  
  13.       
  14. 流畅模式
    15.  
  15.       
  16. 喜欢？评个5分吧
    17.  
  17.    
  18.    
  19.       注销登陆
    20.  
  20.    
 

 

  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. } 

 

列表三

html5+css3+js开发APP实例教程1 -- 文字列表

  1.  
  2.    
  3.       
  4. 关于我们
    5.  
  5.       
  6. 更多应用
    7.  
  7.    
  8.    
  9.       
  10. 意见反馈
    11.  
  11.       
  12. 清除缓存
    13.  
  13.       
  14. 流畅模式
    15.  
  15.       
  16. 喜欢？评个5分吧
    17.  
  17.    
  18.    
  19.       注销登陆
    20.  
  20.    
 

 

  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

×××：

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


本文标题：html5+css3+js开发APP实例教程1--文字列表
文章起源：http://bjjierui.cn/article/gcjghe.html

其他资讯

Copyright © 2012-2020 网创优客信息咨询 版权所有 蜀ICP备2023009085号-7
手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号 邮编:610000 Email:wh@cdxwcx.com
成都网络公司-网创优客建站品牌专注成都网站建设、成都网站设计服务，为成都公司建设高品质的网站