上一篇
下一篇
div+css新手实例：新闻列表
日期:2009-07-08作者:woniu
新闻列表在每个网站上几乎都能遇到，今天发一个比较常见的新闻列表实例。
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
css:
Example Source Code
.list{
margin: 0px 10px 20px;
text-align: left;
}
.list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.list li{
width: 100%;
}
.list li a{
color: #777777;
display: block;
padding: 0px 0px 4px 15px;
}
.list li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
}
XHtml
Example Source Code
<ul class="list">
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题01</a></li>
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题02</a></li>
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题03</a></li>
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题04</a></li>
</ul>
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
css:
Example Source Code .list{
margin: 0px 10px 20px;
text-align: left;
}
.list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.list li{
width: 100%;
}
.list li a{
color: #777777;
display: block;
padding: 0px 0px 4px 15px;
}
.list li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
}
XHtml
Example Source Code <ul class="list">
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题01</a></li>
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题02</a></li>
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题03</a></li>
<li><span>2006年6月6日 </span><a href="http://www.woaicss.com/#">新闻标题04</a></li>
</ul>
文章来自: 
引用通告: 
Tags: 评论: 1 | 引用: 0 | 查看次数: -
回复
www.lusongsong.com[2009-07-09 01:20 PM | 
]发表评论