欢迎来到福编程网，本站提供各种互联网专业知识！

手机版

微信关注

快捷导航: 正则表达式 AJAX相关黑客相关相关技巧 Mysql MsSql MsSql2005 MsSql2008 MariaDB Oracle Access SQLite PostgreSQL MongoDB DB2 Redis 数据库文摘数据库其它 LINUX RedHat/Centos Ubuntu/Debian Fedora Solaris 红旗Linux Unix/BSD 苹果MAC 麒麟系统注册表 BIOS 系统安装系统进程 Fireworks教程

广告商业广告，理性选择

您的位置：网站首页 > 网络编程 > CSS/HTML > 经验交流

css多行多列的新闻模式

发布时间：2008-05-22　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

css多行多列的实现一般要注意a的浮动.需要注意的:li的清除浮动

看图:

这种效果,甚至是三列四列的新闻模块,以前我都用table,以为比css方便,直到后来发先了a的浮动之后,原来用ul更方面,更容易控制,先来看看代码吧:

引用:

.news{}
.newsli{list-style:none;clear:both}
.newslia#n1{text-decoration:none;float:left;line-height:22px;}
.newslia#n2{text-decoration:none;float:right;color:#999}
.newslia#n3{float:right;padding-right:20px;color:#999}
.newslia#n1:hover{text-decoration:underline;}
.newslia#n3:hover,.newslia#n3:hover{text-decoration:none;}
a#n1为新闻标题,左浮动,n2和n3为点击次数和发布日期,右浮动,距离20px;
注意,li上一定要清除所有浮动.
测试支持ie6,ie7,ff,opera.

示例,三列:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css">  </style></head> <body> 这是三列左列，新闻标题项点击发布日期 >> 热烈祝贺weilaixu.cn隆重上线88882008-08-08 >> 热烈祝贺weilaixu.cn隆重上线88882008-08-08 >> 热烈祝贺weilaixu.cn隆重上线88882008-08-08 >> 热烈祝贺weilaixu.cn隆重上线88882008-08-08 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
示例,二列:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css">  </style></head> <body> 这是二列左列，新闻标题项点击次数 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
示例,虚线:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css">  </style></head> <body> 加条虚线 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
示例,不同背景色:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css">  </style></head> <body> 不同背景色 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
示例,边框:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css多行多列的新闻模式</title> <style type="text/css">  </style></head> <body> 边框 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 >> 热烈祝贺weilaixu.cn隆重上线2008-08-08 </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：Internet Explorer 8 beta 中文版与IE7共存的解决方法

下一篇：CSS学习笔记Padding 属性中参数的定义与使用

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

css多行多列的新闻模式

引用:

相关推荐

文章分类

热门关键词

热门文章

最新更新