摘要:本篇教程探讨了CSS多行多列的新闻模式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS的入门。
引用:
.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.
示例,三列:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
示例,二列:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
示例,虚线:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
示例,不同背景色:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标WEB前端HTML/CSS频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号