DIV CSS实例教程:一款清新风格的CSS新闻列表制作_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:27:21
原创
1447人浏览过

  今天我们说说一款新闻列表的制作。新闻列表是一个网站的重要组成元素。我们会经常遇到它,如何处理他的外观显得尤为重要。这个实例中,我们将标题与日期作单独的浮动,而且在链接的鼠标悬停时,呈现出不同的色彩变化。而且我们控制LI的背景,让其也产生一些交互。总体上的效果还不错。大家可以看看下面的图片:

XHTML代码很简单,就是一个无序列表,不过我们对标题和时间设置了不同的CLASS以方便控制。

     

我们看下面的CSS代码:

立即学习前端免费学习笔记(深入)”;

采风问卷
采风问卷

采风问卷是一款全新体验的调查问卷、表单、投票、评测的调研平台,新奇的交互形式,漂亮的作品,让客户眼前一亮,让创作者获得更多的回复。

采风问卷 20
查看详情 采风问卷
#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;}

  首先我们定义了UL的边框,内边距等相关常用的属性。
  我们设置了LI的宽度为530PX,高度为30px.
  我们对标题和时间进行了单独的设置。相关的属性也很容易理解的。
  我们设置了链接的样式。主要需要注意的是色彩的变化及设置cursor:hand;


http://www.52css.com/attachments/month_0708/20070807.html  点击查看最终的运行效果!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号