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