各种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代码加上运行功能。
页:
[1]