在DIV+CSS排版中新闻列表的制作方法- HTML/XHTML教程

当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 在DIV+CSS排版中新闻列表的制作方法

HTML/XHTML教程: 用JavaScript实现动画效果(1); 用JavaScript实现动画效果(2); 数字日期转化为汉字日期格式; JavaScript基础实例:如何计算24点(1); JavaScript基础实例:如何计算24点(2); JavaScript基础实例:如何计算24点(3); JavaScript基础实例:如何计算24点(4); JavaScript学习:删除数组元素; javascript表单之间的数据传递(1); javascript表单之间的数据传递(2); 一个简单的javascript菜单(1); 一个简单的javascript菜单(2); 一个简单的javascript菜单(3); 一个简单的javascript菜单(4); 一个简单的javascript菜单(5); JavaScript技巧:让网页自动穿上外套; 一个非常强大完整的web表单验证程序(1); 一个非常强大完整的web表单验证程序(2); 基于客户端的分页导航(1); 基于客户端的分页导航(2)

No. « ‹ 48 49 50 51 › »

技术文章搜索

关键字

HTML/XHTML教程中的在DIV+CSS排版中新闻列表的制作方法

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 106 ::

收藏到网摘: n/a

Div+CSS布局入门教程实践DIV＋CSS网页布局入门指南

最终效果:

2005年5月30日新闻标题01
2005年5月30日新闻标题02
2005年5月30日新闻标题03
2005年5月30日新闻标题04

CSS代码:

.list{ margin: 0px 10px 20px; text-align: left;
}
.list ul{ list-style-type: none; margin: 0px; padding: 0px;
}
.list li{ background: url(/imagelist/06/31/gu432qq5q695.gif) repeat-x bottom; /*列表底部的虚线*/ width: 100%;
}
.list li a{ color: #777777; display: block; padding: 6px 0px 4px 15px; background: url(/imagelist/06/31/7ei20115t3sv.gif) no-repeat 0 6px; /*列表左边的箭头图片*/
}
.list li span{ float: right;/*使span元素浮动到右面*/ text-align: right;/*日期右对齐*/
}
.list li a:hover{ color: #336699; background: url(/imagelist/06/31/jq1ysff5b0ac.gif) repeat-x bottom;
}

注意:span一定要放在前面,反之会产生换行

<ul class="list">
<li><span>2005年5月30日 </span><a href="#">新闻标题01</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题02</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题03</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题04</a></li>
</ul>

Div+CSS布局入门教程实践DIV＋CSS网页布局入门指南

HTML/XHTML教程 中的 在DIV+CSS排版中新闻列表的制作方法

评论 (0) All

HTML/XHTML教程中的在DIV+CSS排版中新闻列表的制作方法