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-image:-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-image:-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-image:-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

源码下载：

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