html中产品页面的制作,CSS实例教程:制作网页特殊产品列表

CSS实例教程:制作网页特殊产品列表

互联网   发布时间：2009-04-02 19:35:12   作者：佚名   我要评论

网页制作Webjx文章简介：我们通常的做法是，把日期写在span标签里，然后把span标签写在li里，css定义span(float:right)，让span浮动在列表的右边。

近日，被同事问及一个产品列表的做法怎么实现？一个产品列表，每个产品列表后

我们通常的做法是，把日期写在span标签里，然后把span标签写在li里，css定义span(float:right)，让span浮动在列表的右边。

近日，被同事问及一个产品列表的做法怎么实现？一个产品列表，每个产品列表后面跟一个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部分:

• ·10%无责赔偿仍存 交强惊2008-11-28

我们一般的逻辑做法都是把日期写在新闻列表的后面。其实不然，我们应该把日期放在新闻列表的前面。至于为什么要这样做，我还没找到很好的解释。

正确的做法：

• 2008-11-28·10%无责赔偿仍存 交强惊

全部代码：

无标题文档

• 2008-11-28·10%无责赔偿仍存 交强惊
• 2008-11-28·百张奥运开幕式门票赠送大揭晓！
• 2008-11-28·出游买保险，赢好礼，蓝牙耳机、野餐包等你来拿！
• 2008-11-28·10%无责赔偿仍存 交强惊
• 2008-11-28·五周年缤纷好礼活动中奖名单第2期

相关文章

这篇文章主要介绍了纯 CSS 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-13

这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-10-12

这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了CSS两种常用的封装示例，帮助大家更好的利用CSS制作网页，感兴趣的朋友可以了解下2020-10-12

这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-12

这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09

这篇文章给大家介绍了CSS中width和height的默认值auto与%案例，本文通过实例案例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-30

这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-28

最新评论