使用ul li實現的文章列表效果程式碼例項

antzone發表於2017-03-28

本章節分享一段比較常見的程式碼，那就是使用ul li元素實現文章列表效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>   
#list{ 
  width:400px; 
  list-style-type:none; 
  margin:0; 
  padding:0; 
} 
#list li{overflow:hidden;}  
#list li span{   
  float:right;    
}     
</style>    
</head>    
<body>    
<ul id="list">  
  <li><span>2015-12-2</span>螞蟻部落歡迎您，只有努力才會有美好未來。</li>  
  <li><span>2015-12-2</span>本站的url地址是softwhy.com。</li>  
  <li><span>2015-12-2</span>只有努力奮鬥才會有美好的未來。</li>            
</ul>    
</body>    
</html>

相關文章