DIV CSS实例教程：一款清新风格的CSS新闻列表制作 - CSDN文库

CSS实例教程：一款清新风格的CSS新闻列表制作

需积分: 33 123 浏览量更新于2023-03-16 收藏 41KB DOCX 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

今天我们说说一款新闻列表的制作。新闻列表是一个网站的重要组成元素。我们会经常遇到它，如何处理

他的外观显得尤为重要。这个实例中，我们将标题与日期作单独的浮动，而且在链接的鼠标悬停时，呈现

出不同的色彩变化。而且我们控制 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">这里是相关文字标题的文字这里是相关文字标题</spa

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

bingyingl

粉丝: 1
资源: 18

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈