大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > css多行多列的新闻模式

css多行多列的新闻模式

关键词:css多行多列新闻模式  阅读(454) 赞(20)

[摘要]本文是对css多行多列的新闻模式的讲解,对学习CSS编程技术有所帮助,与大家分享。
用ul更方面,更容易控制,先来看看代码吧:
引用:
.news{}
.news li{ list-style:none; clear:both}
.news li a#n1{ text-decoration:none; float:left; line-height:22px;}
.news li a#n2{ text-decoration:none; float:right; color:#999}
.news li a#n3{ float:right; padding-right:20px;color:#999}
.news li a#n1:hover{ text-decoration:underline;}
.news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
a#n1为新闻标题,左浮动,n2和n3为点击次数和发布日期,右浮动,距离20px;
注意,li上一定要清除所有浮动.
测试支持ie6,ie7,ff,opera.

示例,三列:

 提示:您可以先修改部分代码再运行
示例,二列:

 提示:您可以先修改部分代码再运行
示例,虚线:

 提示:您可以先修改部分代码再运行
示例,不同背景色:

 提示:您可以先修改部分代码再运行
示例,边框:

 提示:您可以先修改部分代码再运行


相关评论