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

2025-02-19 技术教程

不多说，直接上实例。

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

列表一：

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

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

列表二

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

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

列表三

<divclass="tempbox"><ulclass="listico"><li><spanclass="icoico1"><spanclass="more">关于我们</li><li><spanclass="icoico2"><spanclass="more">更多应用</li></ul><ulclass="listico"><li><spanclass="icoico1"><spanclass="more">意见反馈</li><li><spanclass="icoico1"><spanclass="more">清除缓存</li><li><spanclass="icoico1"><spanclass="more">流畅模式</li><li><spanclass="icoico1"><spanclass="more">喜欢？评个5分吧</li></ul><ulclass="listico"><liclass="radius5"><spanclass="icoico3"><spanclass="more">注销登陆</li></ul></div>

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

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

DEMO

×××：

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