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

×××：

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