`

各种css新闻页样例

阅读更多
下面这些模板可以随意添加在你的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代码加上运行功能。
分享到:
评论

相关推荐

    CSS样例 各种空间自由组合

    这个压缩包文件"CSS样例 各种空间自由组合"提供了一个丰富的资源库,包含了57个不同的CSS应用示例,涵盖了网页设计中的多种常见元素和功能。以下将详细介绍这些样例所涉及的知识点: 1. 导航:导航是网站设计中的...

    文字无间隙向上滚动样例

    这种效果通常用于显示实时更新的信息,如新闻标题、股票行情或者天气预报等。我们将深入探讨如何创建这样的效果,并结合源码分析其工作原理。 在网页开发中,文字滚动效果可以通过JavaScript、CSS或者HTML5的`...

    bootstrap常用功能样例

    这个“bootstrap常用功能样例”压缩包显然是一个包含各种Bootstrap功能演示的资源集合,非常适合初学者理解和学习Bootstrap的各种特性。 1. **响应式设计**:Bootstrap的核心特性之一就是响应式布局。它使用预定义...

    python爬虫样例

    在本案例中,我们有三个具体的爬虫样例:糗事百科爬虫、百度贴吧爬虫以及360新闻爬虫。这些示例将帮助初学者理解Python爬虫的基本原理和实践方法。 首先,让我们深入探讨Python爬虫的基础知识。Python之所以成为...

    news-grid:样例新闻网站

    CSS(Cascading Style Sheets)用于美化和布局网页,而JavaScript则用于添加交互性,如点击新闻条目展开全文、滚动加载更多新闻等。 为了优化用户体验,我们还需要考虑响应式设计。通过媒体查询(`@media`),我们...

    python爬虫技术学习样例

    本学习样例将带你深入了解Python爬虫的基本原理和实际应用。 首先,我们要知道Python之所以在爬虫领域广泛应用,是因为它具有丰富的库支持,如BeautifulSoup、Scrapy、requests和re等。`baidu_test.py`很可能是一个...

    新闻发布系统非常好用的新闻发布系统

    至于“news”这一压缩包子文件的文件名称,通常意味着它包含了与新闻发布系统相关的文件,如系统源代码、数据库结构、配置文件、样例新闻内容或者系统文档。这些文件可能包括HTML、CSS、JavaScript、PHP等编程语言...

    能生成HTML的新闻系统(调试成功)

    在“sfnews”这个压缩包中,可能包含了新闻系统的源代码、配置文件、样例数据等资源。开发者或使用者可以通过这些资源了解系统的架构、数据模型、模板设计以及如何生成和管理HTML新闻页面。学习这个系统,可以从以下...

    HTML5几个设计和修改的页面范例分享

    此外,HTML5引入了`&lt;article&gt;`元素,用于定义一个独立的内容单元,例如一篇博客文章或新闻报道。在例子中,整篇文章可以被包裹在`&lt;article&gt;`标签内,以提高可读性和可访问性: ```html &lt;p&gt;&lt;span class="LeadIn...

    jquery新闻图片九宫格布局鼠标悬停图片上下滑动显示文字信息

    在网页设计中,"jQuery新闻图片九宫格布局鼠标悬停图片上下滑动显示文字信息"是一种常见的交互式设计模式,常用于展示新闻、产品或任何需要图文并茂信息的场景。这种设计不仅可以提高用户体验,还能有效地利用有限的...

    php做的新闻发布系统后台

    描述中提到的“导入数据就可以用”,意味着系统可能包含预设的数据结构和样例数据,用户只需进行简单的数据导入步骤,就能立即开始使用。这对于快速部署和测试系统非常有帮助。 4. **文件夹结构**: “jwcnews”...

    ogin登录全屏适应左栏后台界面后台管理系统Amazeui图表erp管理系统客户管理系统响应式.rar

    标题中的“ogin登录全屏适应左栏后台界面后台管理系统Amazeui图表erp管理系统客户管理系统响应式.rar”表明这是一个用于创建后台管理系统的HTML...同时,还提供了其他页面元素和表单样例,以满足更广泛的后台管理需求。

    体育运动新闻网页模板3244_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar

    9. **Sport01**:这个文件名可能是模板中的一部分,可能是一个主要的HTML文件,或者是包含体育相关元素的CSS或JavaScript文件,或者是某个样例页面的名称。 综上所述,体育运动新闻网页模板3244是一个全面的前端...

    html5时间轴设计工作记录_css时间轴样式代码

    时间轴在网站上常用于故事叙述、里程碑展示或新闻更新,它能够使用户直观地理解信息的发展脉络。 HTML5时间轴的设计首先需要创建基本的结构。可以使用`&lt;section&gt;`或`&lt;article&gt;`元素来定义时间轴的容器,然后使用`...

    dw.zip

    “新浪网首页课堂作业样例”则可能是一个更复杂的实例,因为新浪网的首页通常具有丰富的新闻更新、广告、动态内容和用户交互。学生可能需要分析并复制其复杂布局、新闻滚动、导航菜单等功能。 通过解压并研究这些...

    早期jiee的分层汇编

    通过分析文件名,我们可以推测出该系统包含了一系列的功能模块和样例,覆盖了各种应用场景。这些设计使得jiee系统在当时可能具有很高的灵活性和可扩展性。然而,随着Web技术的不断发展,现代的Web框架和库已经提供了...

    黑色漂亮新闻科技博客blog整站模板5031.zip

    这篇内容将深入解析“黑色漂亮新闻科技博客blog整站模板5031.zip”这个压缩包文件中的关键知识点,以及如何利用这些资源来构建一个高效、吸引人的科技新闻博客网站。 首先,我们要明白“整站模板”是什么。整站模板...

    portalUi一个主页的ui

    因此,portalUi很可能具有模块化和可扩展的特性,方便开发者整合各种功能和服务。 "压缩包子文件的文件名称列表"中,"Framework"可能是一个包含portalUi核心代码和库的文件夹,包括JavaScript、CSS、图片和其他必要...

    jQuery数字翻页滚动展示效果.rar

    这个特效通常用于网站的分页展示,比如博客、新闻列表或者产品目录,通过动态的数字翻页效果提升用户体验。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使得创建复杂的...

    非常简洁的个人博客模板1_白色简洁个人博客二栏线条企业.rar

    8. **sample-event.jpg** - 样例事件图片,可能是用于展示活动或新闻的图像示例。 9. **comment-arrow.gif** - 评论箭头图像,可能用作引导用户注意到评论区域或指示评论的方向。 10. **no-subnavigation.html** -...

Global site tag (gtag.js) - Google Analytics