ul li實現的新聞列表程式碼例項

admin發表於2017-03-26

使用ul li製作新聞列表形式效果是最基本的操作。

當然對於初學者來說可能是一個不大不小的挑戰，這種東西也沒什麼好說的。

只要給出一個程式碼例項，自己認真分析一下就可以掌握。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#items{ 
  width:900px; 
  height:auto; 
  margin:0 auto; 
  padding:5px 0; 
  clear:both; 
} 
#items ul, #items li{ 
  list-style:none; 
} 
#items li{ 
  width:800px; 
  height:28px; 
  text-align:right; 
  background-image url(../images/icon_text.gif); 
  background-repeat: no-repeat; 
  background-position: 50px center; 
  padding-left: 0px; 
  line-height:28px; 
  color:#CCC; 
  border-bottom:dashed 1px #CCC; 
} 
#items li a{ 
  float:left; 
  text-align:left; 
  line-height:28px; 
  color:#666; 
  text-decoration:none; 
} 
#items li a:hover{ 
  color:#F00; 
} 
</style> 
</head> 
<body> 
<div id="items"> 
  <ul> 
    <li><a href="#">螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來</a>2010-04-03</li> 
    <li><a href="#">沒有任何人一開始就是高手，必須要好好學習</a>2010-04-03</li> 
    <li><a href="#">本站的url地址是softwhy.com</a>2010-04-03</li> 
    <li><a href="#">每一天都是新的，所以要好好真心當前時間</a>2010-04-03</li> 
    <li><a href="#">div css教程裡面有大量詳實的程式碼</a>2010-04-03</li> 
  </ul> 
</div> 
</body> 
</html>

上面的程式碼就是一個簡單的新聞列表，本來前面是有小圖示的，但是這裡由於沒有圖片也就不演示了，大家可以自行製作一個放到相應的路徑下就可以觀看到效果了。

相關文章