金沙国际会员登录

将想法与焦点和您一起共享

HTML和CSS做网页实例教程:网页列表隔行变色发布者:本站     时间:2019-12-20 11:12:33

仅供新手参考学习,欢迎大家提出更多的实现方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>隔行变色</title> 
<script type="text/javascript"> </script> 
 <style type="text/css"> 
 .list ul{position:relative;background:url(这里放一个背景图片) repeat 0 0;width:400px;} 
 .list ul li{height:32px;line-height:32px;} 
 .list ul li em{position:absolute;right:0px;} 
 </style> 
</head> 
<body> 
   <div class="list"> 
     <h3>这是隔行变色啊..</h3> 
     <ul> 
        <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> 
        <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> 
        <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> 
        <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> 
        <li><a href="" alt="">这是隔行变色啊...</a><em>(2009-8-20)</em></li> 
     </ul> 
   </div> 
</body> 
</html>