不多說，直接上實(shí)例。

成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十多年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如雨棚定制等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊賞。

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

列表一：

 

<div class="tempbox"> 
  <ul id="pwslist"> 
      <li><span class="more"></span>劉強(qiáng)東被迫賣地促銷為D輪融資</li> 
      <li><span class="more"></span>傳京東商城出售自建倉(cāng)庫(kù)地塊</li> 
      <li><span class="more"></span>傳亞馬遜即將推出10英寸版K</li> 
      <li><span class="more"></span>網(wǎng)購(gòu)一個(gè)差評(píng)引發(fā)血案 健全</li> 
      <li><span class="more"></span>夏日瘋狂網(wǎng)購(gòu) 傲游瀏覽器3為</li> 
 
      <li><span class="time">2012.12.22</span>電商業(yè)人才饑渴：工作1年最高</li> 
      <li><span class="time">2012.12.22</span>一嗨租車攜手京東商城 推租車</li> 
      <li><span class="time">2012.12.22</span>金山網(wǎng)絡(luò):律師稱金山網(wǎng)購(gòu)保</li> 
      <li><span class="time">2012.12.22</span>小狗攜京東商城強(qiáng)力出擊：定制</li> 
      <li><span class="time">2012.12.22</span>網(wǎng)購(gòu)：不×××成潛規(guī)則 稅收漏</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>關(guān)于我們</li> 
      <li><span class="more"></span>更多應(yīng)用</li> 
  </ul> 
  <ul class="aboutlist"> 
      <li>意見反饋</li> 
      <li>清除緩存</li> 
      <li><span class="more"></span>流暢模式</li> 
      <li><span class="more"></span>喜歡？評(píng)個(gè)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>關(guān)于我們</li> 
      <li><span class="ico ico2"></span><span class="more"></span>更多應(yīng)用</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>喜歡？評(píng)個(gè)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開發(fā)APP實(shí)例教程1--文字列表
本文鏈接：http://sd-ha.com/article44/gcjghe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、靜態(tài)網(wǎng)站、虛擬主機(jī)、App開發(fā)、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)