各种css新闻页样例

qichunren

浏览: 340741 次
性别:
来自: 蕲春－>上海

最近访客更多访客>>

qq22903594

njdragonfly

松喜凉

风中的一匹狼tb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

表现层

CSS Rails PHP 游戏 BBS

下面这些模板可以随意添加在你的ruby on rails项目中的 views里面实现前台的新闻列表
1：有序新闻列表

<style type="text/css">
body{margin:0 auto; padding:0;}
#pagelist{
	font-size:12px;
	margin:20px;
	border:4px #ccc solid;
	padding:10px;
	list-style:none;
	width:530px;
}
#pagelist li{
	width:530px;
	height:30px;
}
#pagelist li a{
	color:#666;
	width:530px;
	height:30px;
	display:block;
	text-decoration:none;
	cursor: hand;
	background:url(images/1.gif) no-repeat 0px 10px;
	line-height:30px;
	border-bottom:#CCC dashed 1px;
}
#pagelist li a .lbt{
	display:block;
	width:448px;
	float:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	text-indent:20px;
}
#pagelist li a .ldt{
	color: #069;
	display:block;
	width:78px;
	float:right;
	white-space: nowrap;
	text-align:center;
}
#pagelist li a:hover{
	color:#03c;
	text-decoration:none;
	border-bottom:1px solid #CAD2FF;
	background:url(images/2.gif) no-repeat 5px 10px;
}
#pagelist li a:hover .ldt{
	color: #000000;
}
</style>
<body>
<ul id="pagelist">
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
	<li><a href="#"><span class="lbt">这里是相关文字标题的文字这里是相关文字标题的文字文字</span><span class="ldt">2007-08-06</span></a></li>
</ul>
</body>

2：list列表页面,IE6,IE7和FF都正常!!

<!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>无标题文档</title>
<style>
.new_list {
	list-style: disc inside url(http://bbs.blueidea.com/attachment.php?aid=83531&noupdate=yes);
	font-size:14px;
}
.new_list li {
	background:#fff url(http://bbs.blueidea.com/attachment.php?aid=83530&noupdate=yes) repeat-x left bottom;
	padding:3px 0px;
}
.new_list a {
	color: #039;
	text-decoration: none;
}
.new_list a:hover {
	color: #f00;
	text-decoration: none;
}
.new_date{ color:#333; font-size:12px; margin:-18px 0 0 0; float:right;}
.new_page{ width:95%; text-align:center; font-size:12px; color:333; padding:10px;}
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}
</style>
</head>
<body>
		  <ul class="new_list">
            <li><a href="#">组图：性感内衣秀熟女酥胸大比拼</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">组图：菲律宾内衣秀模特性感出位</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">创新，成就娅茜品牌发展之路</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">紫秀2006年产品山西发布会近日举行</a><span class="new_date">(2006-07-05)</span> </li>
            <li><a href="#">组图：奢华内衣女郎挑逗欲火迷情业</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">组图：巴西内衣超模天使般魅力</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">夫唱妻随罗胖新宠演绎另类足球魅力(图)</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">内衣搭调 提升性感指数(图)</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">傅成玉坦言后悔没买优尼科 失去发展时机</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">组图：性感名模内衣秀半裸诱惑</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">2006内衣品牌胜诀：差异化，差异化，还是差异化！</a><span class="new_date">(2006-07-05)</span></li>
			<li><a href="#">内衣企业走向营销创新</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">组图：性感内衣秀熟女酥胸大比拼</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">组图：菲律宾内衣秀模特性感出位</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">创新，成就娅茜品牌发展之路</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">紫秀2006年产品山西发布会近日举行</a><span class="new_date">(2006-07-05)</span> </li>
            <li><a href="#">组图：奢华内衣女郎挑逗欲火迷情业</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">组图：巴西内衣超模天使般魅力</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">夫唱妻随罗胖新宠演绎另类足球魅力(图)</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">内衣搭调 提升性感指数(图)</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">傅成玉坦言后悔没买优尼科 失去发展时机</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">组图：性感名模内衣秀半裸诱惑</a><span class="new_date">(2006-07-05)</span></li>
            <li><a href="#">2006内衣品牌胜诀：差异化，差异化，还是差异化！</a><span class="new_date">(2006-07-05)</span></li>
			<li><a href="#">内衣企业走向营销创新</a><span class="new_date">(2006-07-05)</span></li>
          </ul>
</body>
</html>

无序新闻列表

<!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>无标题文档</title>
<style type="text/css">
	div { width: 300px; padding: 10px 5px 10px 0px; background: #FCFCFC; }
	ul {  background: url("http://211.147.3.50/images/sign_x.gif") repeat-y; margin: 0px; padding: 0px; padding-left: 15px; }
	li { display: block; float: left; padding: 1px 5px 0px 5px;  color: #FFF; font-size: 14px; white-space : nowrap; line-height: 1.5em;}
.clearfix{ zoom: 1; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
</style>
</head>
<body>
			<div class="newsList clearfix">
				<ul class="clearfix" >
					<li><a href="http://www.ila571.com/" target="_blank">上海旅行社联盟</a></li>
					<li><a href="http://www.so138.com" target="_blank">千源网</a></li>
					<li><a href="http://www.itquan.com/index.html" target="_blank">IT圈</a></li>
					<li><a href="http://a25.cgno1.com" target="_blank">中国成功网</a></li>
					<li><a href="http://www.55rc.com/" target="_blank" title="五月花人才网 ">五月花人才网</a></li>
					<li><a href="http://www.haoshu.com/" target="_blank">好书网</a></li>
					<li><a href="http://www.chinathink.net/" target="_blank">中国思维网</a></li>
					<li><a href="http://www.333job.com" target="_blank">纳杰人才网</a></li>
					<li><a href="http://cn.ezilon.com/" target="_blank">ezilon中国</a></li>
					<li><a href="http://www.jiayinte.net/fygs/" target="_blank">翻译公司</a></li>
					<li><a href="http://www.wangluochina.com" target="_blank">在线客服</a></li>
					<li><a href="http://www.66155555.com/minghang.asp" target="_blank">机票网</a></li>
					<li><a href="http://www.superdesign.com.cn" target="_blank">网站建设</a></li>
					<li><a href="http://www.jizhe.com.cn" target="_blank">中国新记者网</a></li>
					<li><a href="http://www.zkgame.com/" target="_blank">掌控手机游戏</a></li>
					<li><a href="http://www.tuniu.com/" target="_blank">途牛旅游网</a></li>
					<li><a href="http://www.itpop.com.cn/" target="_blank">IT时尚网</a></li>
					<li><a href="http://www.ucom-networks.com/" target="_blank">优通网络电话</a></li>
					<li><a href="http://www.5istudy.cn/" target="_blank">中国教程在线</a></li>
					<li><a href="http://www.xyws.cn/" target="_blank">杭州女人网</a></li>
					<li><a href="http://www.1wed.cn/" target="_blank">中国婚礼网</a></li>
					<li><a href="http://www.52ms.com/" target="_blank">我爱美食</a></li>
					<li><a href="http://www.beeduu.com/" target="_blank">比渡网</a></li>
					<li><a href="http://nanjing.soufun.com" target="_blank">南京房地产搜房网</a></li>
					<li><a href="http://www.tongcard.com/" target="_blank">通卡消费社区</a></li>
					<li><a href="http://www.19blog.cn/" target="_blank">威客信息网</a></li>
					<li><a href="http://www.5i2008.com/" target="_blank">我爱奥运2008</a></li>
					<li><a href="http://www.spos.com.cn/" target="_blank">食谱网</a></li>
				</ul>
			</div>
</body>
</html>

新闻条内不换行，前面小标是个垂直重复的背景，然后让发布把文字对齐

原文地址：http://www.roredu.com/rubyrails/2008/07/24/css-news-list/

btw:建议JE给HTML代码加上运行功能。

分享到：

Ruby on Rails中怎样给link_to加class和 ... | 漂亮css选项卡效果大全

2008-08-28 18:07
浏览 2151
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

各种css新闻页样例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

各种css新闻页样例

评论

发表评论

相关推荐

10个实用的用于图形化数据的Flash组件

另一款效果炫的Flash广告图片切换效果代码

搜狐博客的Flash广告切换效果

2009年2月最流行的CSS设计

图片局部放大--放大镜效果

漂亮css选项卡效果大全

will_pagenate的样式1

web2.0生成器

15种WEB2.0网站配色

一个轻量的在线编辑器WMD

Railsforum上我认为比较好的贴子

创建一个可移动的层

相关JS代码备忘,不断更新中

我用EXT2.0的布局做的后台管理界面

最近访客更多访客>>