div+css打造新闻列表-IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台！

div+css打造新闻列表

您现在正在浏览：首页 > CSS >

div+css打造新闻列表

作者：青苹果　发布时间：2008-06-16 16:48:58　来源：泰达星空

<!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=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="author" content="nysslyh.cn" />
<title>Css新闻列表</title>
<style type="text/css">
*{margin:0px; padding:0px; font-size:14px;}
.nav{margin:20px auto; width:600px;}
.news{margin:10px 0; padding:10px 0; text-align:left;}
.news li{list-style:none; width:600px;}
.news li span{ float:right; text-align:right;}
.news li a{color: #777; display: block; padding:5px 8px;}
.news li a:hover{color:#369;}
h4{font-weight:bold; color:#FF2222; font-family:'黑体'; font-size:24px; text-align:center; border-bottom:1px solid #ddd;padding:10px 0;}
</style>
</heaD>

<body>
<div class="nav">
<h4>Css新闻列表</h4>
<ul class="news">
<li><span>[2008-03-12]</span><a href="#">Css新闻列表01</a> </li>
<li><span>[2008-03-12]</span><a href="#">Css新闻列表02</a> </li>
<li><span>[2008-03-12]</span><a href="#">Css新闻列表03</a> </li>
<li><span>[2008-03-12]</span><a href="#">Css新闻列表04</a> </li>
<li><span>[2008-03-12]</span><a href="#">Css新闻列表05</a> </li>
</ul>
<strong>注意</strong>:span一定要放在前面,反之会产生换行!
</div>
</body>
</html>