ul和li實現的新聞列表程式碼例項
關於新聞列表這種功能大家一定都不會陌生,本章節通過程式碼例項介紹一下如何利用ul和li實現此功能。
當然這裡沒有特別的在意美觀度問題,下面就通過程式碼例項介紹一下如何實現此功能。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> ul li{ width:500px; list-style-type:none; font-size:12px; line-height:30px; height:30px; } ul li span{ float:right } </style> </head> <body> <ul> <li>螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來。<span>2014-5-6</span></li> <li>本站的地址是softwhy.com歡迎訪問,提供有益的建議和意見<span>2014-5-6</span></li> <li>沒有人一開始就是高手,必須要努力奮鬥才行。<span>2014-5-6</span></li> <li>本站建立於2012年,目的是為使用者提供免費的詳實的教程<span>2014-5-6</span></li> <li>每一天都是新的,所以必須要好好珍惜,不能夠浪費。<span>2014-5-6</span></li> </ul> </body> </html>
上面的程式碼實現了我們的要求,一個基本的新聞列表功能,非常的簡單這裡不多介紹了。
相關文章
- ul li實現的新聞列表程式碼例項
- 使用ul li實現的文章列表效果程式碼例項
- ul、li列表簡單實用程式碼例項
- jQuery結合ul和li實現的下拉選單例項程式碼jQuery單例
- 在ul的最後插入一個li元素程式碼例項
- jQuery實現的新聞列表上下移動調整順序程式碼例項jQuery
- 使用ul和li實現的帶有邊框的方格效果程式碼
- javascript實現的交換li元素的位置程式碼例項JavaScript
- ul和li 帶有邊框的方格程式碼
- js實現li元素隔行背景變色例項程式碼JS
- javascript實現的獲取下一個li元素程式碼例項JavaScript
- ul li實現的水平導航選單
- 4種寫法實現點選ul列表中每個li列印索引索引
- ul>li*3 實現翻書動畫效果動畫
- 在指定位置插入一個新的li元素程式碼例項
- jQuery實現的獲取m到n之間的li元素程式碼例項jQuery
- js刪除li元素程式碼例項JS
- jQuery獲取指定的li元素程式碼例項jQuery
- js刪除指定的li元素程式碼例項JS
- js實現的在li元素列表的任意位置插入一個新的li元素JS
- jquery動態新增li元素程式碼例項jQuery
- css匹配指定行li元素程式碼例項CSS
- jquery實現的下拉和收縮程式碼例項jQuery
- 獲取指定區間的li元素程式碼例項
- css匹配第n個li元素程式碼例項CSS
- jQuery調整li元素順序程式碼例項jQuery
- jQuery獲取所有的li元素程式碼例項jQuery
- javascript獲取li元素內容程式碼例項JavaScript
- canvas實現的刮刮樂程式碼例項Canvas
- css實現梯形程式碼例項CSS
- javascript實現的驗證碼程式碼例項JavaScript
- MyCat分片:水平拆分例項解析和程式碼實現!
- jQuery實現的tab選項卡程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- CSS匹配第一個li元素程式碼例項CSS
- 獲取指定元素下所有li元素程式碼例項
- jquery刪除前n個li元素程式碼例項jQuery
- css匹配最後一個li元素程式碼例項CSS