css学习笔记: css新闻列表的特殊做法
作者:好好 来源:好好blog 发布时间:2009-07-19 14:25:00
近日,被同事问及一个产品列表的做法怎么实现?一个产品列表,每个产品列表后面跟一个button,这些button居右对齐。
其实这个效果跟新闻列表是类似的,我们常常需要做这样的新闻列表效果:
我们通常的做法是,把日期写在span标签里,然后把span标签写在li里,css定义span(float:right),让span浮动在列表的右边。
css部分:
body { font-size:12px}
ul { width:400px; margin:0; padding:0; list-style:none}
.newslist { line-height:20px; padding:5px 0; color:#333; border-bottom:1px dashed #ccc}
.newslist span { color:#888; float:right; text-align:right}
a { color:#333; text-decoration:none}
a:hover { color:blue; text-decoration:underline}
html部分:
<ul>
<li class="newslist">·<a href="#">10%无责赔偿仍存 交强惊</a><span>2008-11-28</span></li>
</ul>
我们一般的逻辑做法都是把<span>日期</span>写在新闻列表的后面。其实不然,我们应该把<span>日期</span>放在新闻列表的前面。至于为什么要这样做,我还没找到很好的解释。
正确的做法:
<ul>
<li class="newslist"><span>2008-11-28</span>·<a href="#">10%无责赔偿仍存 交强惊</a></li>
</ul>
全部代码:
猜你喜欢
- 先看看CSS框架的利与弊前段时间一直在讨论CSS框架。很多朋友看了那三篇文章后提了不少自己意见。特别是一位北京的朋友A君,他有一个小的团体,
- 对所有数据进行整合与管理当你使用SQL Server 2008企业级的数据仓库平台时,你可以高效的操纵所有数据,并对其进行统一管理存储。◆合
- 写了一个小巧的jquery拾色工具,代码简单得不得了,只有这么几行:(function($){ $.fn.pickColor=fu
- 制作网页可说是易学难精,因此,不断吸收经验可弥补不足,以下列出的50个制作主页的独门招数可帮助你尽快成为高手,哈哈!1、让读者有理由逗留。要
- 在静态页面里需要显示浏览次数的地方加上这个:浏览次数:<SCRIPT language='javascript
- 对于比较长的数字组成的字符串,我们一般会用逗号(,)隔开来格式化数字,从右往左每三个数字用一个逗号分组隔开。为什么要用逗号隔开数字呢?因为当
- 设计中文网站的朋友都会有这样的体会,Dreamweaver功能虽然强大,但要按照中文的行文习惯实现每个
- 用window.open打开的窗口中,有时候session变量会丢掉,给asp编程带来的一定的麻烦。用参数传递解决它:<DIV&nbs
- 在做网站产品展示页面时,一般会用到缩略图,好处当然是直观醒目让人一目了然。点击进入然后看到大图及具体的介绍。但是缩略图在实现上带来了两个问题
- 1、 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务。 2、 开始->程序->Oracle - OraHome81-
- 数据字典是Oracle存放有关数据库信息的地方,其用途是用来描述数据的。比如一个表的创建者信息,创建时间信息,所属表空间信息,用户访问权限信
- Windows下ORACLE完全卸载:使用OUI可以卸载数据库,但卸载后注册表和文件系统内仍会有部分残留。这些残留不仅占用磁盘空间,而且影响
- 关于本文:本着互联网共享主义精神,特写此文献给建站新手,授人以鱼,不如授人以渔,本文所讲的只是方法和原理,希望大家看完此文,能够从中得到些帮
- 今天看YUI的视频教程,YUI的工程师介绍的一款在线的图片压缩工具,也许你用过,也许没有,不过我这里强烈推荐大家用一下,我用smush.it
- <ScriptRUNAT=SERVERLanguage=VBScript>SubApplication_OnStar
- 1. 相对与比较老的环境,建议使用第二个 set dbconnection=Server.CREATEOBJECT("ADODB.
- aspjpeg组件官方下载地址:http://www.persits.com/说明: 1、aspjpeg能对图片水印进行透明度调整
- 阅读上一篇:FrontPage2002简明教程四:网页超级链接 一、三种添加CSS的方式 在FrontPage 2002里可以通过三种方式给
- 关于如何区分艺术和设计的话题总是玄之又玄,并因此引发的争论也有很长一段时间。艺术家和设计师都基于相同的知识基础来创作视觉作品,但他们创作的理
- 人类学是关于人的研究;社会人类学(social anthropology)是研究人类社会的学科。社会人类学还可以理解成“文化翻译”(the