ul li实现的新闻列表代码实例

ul li实现的新闻列表代码实例:
使用ul li制作新闻列表形式效果是最基本的操作。
当然对于初学者来说可能是一个不大不小的挑战,这种东西也没什么好说的。
只要给出一个代码实例,自己认真分析一下就可以掌握。
代码实例如下:

<!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>

上面的代码就是一个简单的新闻列表,本来前面是有小图标的,但是这里由于没有图片也就不演示了,大家可以自行制作一个放到相应的路径下就可以观看到效果了。

你可能感兴趣的:(ul li实现的新闻列表代码实例)