- 本栏最新文章
- CSS定义hr分割线的样式 04-02
- 用CSS让文字居于DIV的底部 04-02
- 用CSS控制图片自适应大小 04-02
- 常用CSS命名参考 04-02
- 清除浮动clear:both的应用详解 04-02
- 超炫的单选框与复选框效果！ 04-02
- CSS文件是链接 还是应该嵌入？ 04-01
- 如何用CSS自定义鼠标显示的形状？ 04-01
- 如何实现多风格选择 样式实时切换？ 04-01
- css样式教学--实时切换网页的CSS样式实现 04-01
- 本栏推荐文章
- Photoshop教程：水灵灵的美女调出来 12-30
- AS3与后台交互 12-21
- AS3通俗教程---AS3自身loading制作 12-19
DIV CSS实例教程：一款清新风格的CSS新闻列表制作Author:DivCSS
简介：很久没有更新了，对不起大家。在北京上网不方便，办公室所用的北京铁通，居然不能登录到52CSS.com，我换了网站所在服务器也解决不了问题，很郁闷。如果有哪位达人了解出错的原因，还望告之，QQ（九一五五O八）！ ...
很久没有更新了，对不起大家。在北京上网不方便，办公室所用的北京铁通，居然不能登录到52CSS.com，我换了网站所在服务器也解决不了问题，很郁闷。如果有哪位达人了解出错的原因，还望告之，QQ（九一五五O八）！感谢！
今天我们说说一款新闻列表的制作。新闻列表是一个网站的重要组成元素。我们会经常遇到它，如何处理他的外观显得尤为重要。这个实例中，我们将标题与日期作单独的浮动，而且在链接的鼠标悬停时，呈现出不同的色彩变化。而且我们控制LI的背景，让其也产生一些交互。总体上的效果还不错。大家可以看看下面的图片：
XHTML代码很简单，就是一个无序列表，不过我们对标题和时间设置了不同的CLASS以方便控制。
Example Source Code [www.52css.com]
<ul id="pagelist">
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
</ul>
我们看下面的CSS代码：
Example Source Code [www.52css.com]
首先我们定义了UL的边框，内边距等相关常用的属性。
我们设置了LI的宽度为530PX，高度为30px.
我们对标题和时间进行了单独的设置。相关的属性也很容易理解的。
我们设置了链接的样式。主要需要注意的是色彩的变化及设置cursor:hand;。
http://www.52css.com/attachments/month_0708/20070807.html 点击查看最终的运行效果！
今天我们说说一款新闻列表的制作。新闻列表是一个网站的重要组成元素。我们会经常遇到它，如何处理他的外观显得尤为重要。这个实例中，我们将标题与日期作单独的浮动，而且在链接的鼠标悬停时，呈现出不同的色彩变化。而且我们控制LI的背景，让其也产生一些交互。总体上的效果还不错。大家可以看看下面的图片：
XHTML代码很简单，就是一个无序列表，不过我们对标题和时间设置了不同的CLASS以方便控制。
Example Source Code [www.52css.com]<ul id="pagelist">
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题</span><span class="ldt">2007-08-06</span></a></li>
<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字字</span><span class="ldt">2007-08-06</span></a></li>
</ul>
我们看下面的CSS代码：
Example Source Code [www.52css.com]#pagelist {border:4px solid #ccc; padding:10px; width:530px; font-size:12px; list-style-type:none; }
#pagelist li {width:530px; height:30px;}
#pagelist li a .lbt {display:block; width:448px; float:left; text-indent:20px; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; display:inline;}
#pagelist li a .ldt {display:block; width:75px; float:right; text-align:center; color:#069; text-decoration:none; display:inline;}
#pagelist li a {width:530px; height:30px; display:block; line-height:30px; color:#666; text-decoration:none; cursor:hand; background:url(20070807_bg.png) no-repeat 0 0;}
#pagelist li a:hover{ color:#03c; text-decoration:none; background:url(20070807_bg.png) no-repeat 0 -30px;}
#pagelist li a:hover .ldt {color:#000;}
#pagelist li {width:530px; height:30px;}
#pagelist li a .lbt {display:block; width:448px; float:left; text-indent:20px; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; display:inline;}
#pagelist li a .ldt {display:block; width:75px; float:right; text-align:center; color:#069; text-decoration:none; display:inline;}
#pagelist li a {width:530px; height:30px; display:block; line-height:30px; color:#666; text-decoration:none; cursor:hand; background:url(20070807_bg.png) no-repeat 0 0;}
#pagelist li a:hover{ color:#03c; text-decoration:none; background:url(20070807_bg.png) no-repeat 0 -30px;}
#pagelist li a:hover .ldt {color:#000;}
首先我们定义了UL的边框，内边距等相关常用的属性。
我们设置了LI的宽度为530PX，高度为30px.
我们对标题和时间进行了单独的设置。相关的属性也很容易理解的。
我们设置了链接的样式。主要需要注意的是色彩的变化及设置cursor:hand;。
http://www.52css.com/attachments/month_0708/20070807.html 点击查看最终的运行效果！
