栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
CSS实例教程:制作网页特殊产品列表
www.jz123.cn 2009-03-26 来源: 中国建站 责任编辑(袁袁) 我要投递新闻
近日,被同事问及一个产品列表的做法怎么实现?一个产品列表,每个产品列表后面跟一个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> |
全部代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
上一篇:div层被flash层遮盖问题解决思路 下一篇:CSS经验:ul列表不正确使用的趋势