源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

css多行多列的新闻模式

时间：2020-11-17 16:25 编辑：来源：阅读：
扫一扫，手机访问

摘要：css多行多列的新闻模式

看图:
[img]http://onlyaa.com/uploads/allimg/080521/0914260.gif[/img]
这种效果,甚至是三列四列的新闻模块,以前我都用table,以为比css方便,直到后来发先了a的浮动之后,原来用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.

示例,三列:

<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
css多行多列的新闻模式 
 
 
这是三列 
[list] 
<li>[url=http://weilaixu.cn]左列，新闻标题项[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]</div>
</br>示例,二列:
</br><div class="htmlarea"><textarea id="runcode83385">
 
 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
css多行多列的新闻模式 
 
 
这是二列 
[list] 
<li>[url=http://weilaixu.cn]左列，新闻标题项[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]</div>
</br>示例,虚线:
</br><div class="htmlarea"><textarea id="runcode61359">
 
 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
css多行多列的新闻模式 
 
 
加条虚线 
[list] 
<li>[url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]</div>
</br>示例,不同背景色:
</br><div class="htmlarea"><textarea id="runcode74322">
 
 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
css多行多列的新闻模式 
 
 
不同背景色 
[list] 
<li>[url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]</div>
</br>示例,边框:
</br><div class="htmlarea"><textarea id="runcode55759">
 
 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
css多行多列的新闻模式 
 
 
边框 
[list] 
<li>[url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://weilaixu.cn]>> 热烈祝贺weilaixu.cn隆重上线[/url][url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]</div></div>
  
 
  <a name="pj"></a>
 <div class="pinlun fontyh">
  <ul class="plu1">
  <li class="l1"><strong>全部评论</strong>(0)</li><li class="l2"></li>
  </ul>
  <form name="f1" method="post" target="_blank" onSubmit="return newspj()">
  <input type="hidden" value="161633" name="bh" />
  <ul class="plu0">
  <li class="l1"><textarea id="pjt" name="pjt">

[展开所有评论]

上一篇：css创意ul+li实现的细线表格实现代码
下一篇：网页设计布局基础第1/4页

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部