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

不多说，直接上实例。

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

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

列表一：

 

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

 

#pwslist li{ 
  height: 40px; line-height: 40px; 
  border-bottom: 1px solid #eee; 
  text-indent: 10px; 
  background: #f2f3f5; 
  background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
   
} 
#pwslist li:hover{ 
 background: #d6f0ff; 
} 
#pwslist li span.more{ 
  width: 30px; 
 height: 40px; 
  display: block; 
  float: right; 
  background: url(1.png) no-repeat center; 
} 
#pwslist li span.time{ 
  height: 40px; 
  padding-right: 10px; 
 display: block; 
  float: right; 
  font-size: 12px; 
 color: #ccc; 
} 

 

列表二

 

<div class="tempbox"> 
  <ul class="aboutlist"> 
      <li><span class="more"></span>关于我们</li> 
      <li><span class="more"></span>更多应用</li> 
  </ul> 
  <ul class="aboutlist"> 
      <li>意见反馈</li> 
      <li>清除缓存</li> 
      <li><span class="more"></span>流畅模式</li> 
      <li><span class="more"></span>喜欢？评个5分吧</li> 
  </ul> 
  <ul class="aboutlist"> 
      <li class="radius5"><span class="more"></span>注销登陆</li> 
  </ul> 
</div> 

 

.aboutlist{padding: 10px;} 
.aboutlist li{ 
  height: 40px; line-height: 40px; 
  border-bottom: 1px solid #eee; 
  text-indent: 10px; 
  background: #f2f3f5; 
  background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
   
} 
.aboutlist li:first-child{ 
  border-radius:5px 5px 0px 0px; 
} 
.aboutlist li:last-child{ 
 border-radius:0px 0px 5px 5px; 
} 
 
.aboutlist li:hover{ 
 background: #d6f0ff; 
} 
.aboutlist li span.more{ 
  width: 30px; 
 height: 40px; 
  display: block; 
  float: right; 
  background: url(1.png) no-repeat center; 
} 
.aboutlist li.radius5{ 
  border-radius:5px; 
} 

 

列表三

<div class="tempbox"> 
  <ul class="listico"> 
      <li><span class="ico ico1"></span><span class="more"></span>关于我们</li> 
      <li><span class="ico ico2"></span><span class="more"></span>更多应用</li> 
  </ul> 
  <ul class="listico"> 
      <li><span class="ico ico1"></span><span class="more"></span>意见反馈</li> 
      <li><span class="ico ico1"></span><span class="more"></span>清除缓存</li> 
      <li><span class="ico ico1"></span><span class="more"></span>流畅模式</li> 
      <li><span class="ico ico1"></span><span class="more"></span>喜欢？评个5分吧</li> 
  </ul> 
  <ul class="listico"> 
      <li class="radius5"><span class="ico ico3"></span><span class="more"></span>注销登陆</li> 
  </ul> 
</div> 

 

.listico{padding: 10px;} 
.listico li{ 
  height: 40px; line-height: 40px; 
  border-bottom: 1px solid #eee; 
  background: #f2f3f5; 
  background-p_w_picpath:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#f2f3f5), to(#e1e7ea)); 
   
} 
.listico li:first-child{ 
 border-radius:5px 5px 0px 0px; 
} 
.listico li:last-child{ 
 border-radius:0px 0px 5px 5px; 
} 
 
.listico li:hover{ 
 background: #d6f0ff; 
} 
.listico li span.more{ 
  width: 30px; 
 height: 40px; 
  display: block; 
  float: right; 
  background: url(1.png) no-repeat center; 
} 
.listico li span.ico{ 
 width: 14px; 
 height: 20px; 
  margin: 10px; 
  display: block; 
  float: left; 
 background-size: 14px; 
} 
.listico li span.ico1{background: url(brainstorming.png) no-repeat center;} 
.listico li span.ico2{background: url(brand.png) no-repeat center;} 
.listico li span.ico3{background: url(comment.png) no-repeat center;} 
 
 
.listico li.radius5{ 
  border-radius:5px; 
} 

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

DEMO

×××：

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

新闻名称：html5+css3+js开发APP实例教程1--文字列表
本文链接：https://www.cdcxhl.com/article44/gcjghe.html

成都网站建设公司_创新互联，为您提供网站制作、静态网站、虚拟主机、App开发、服务器托管、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联