来看看：CSS实例教程:制造网页特别产物列表

显示全部楼层 · 发表于 2015-1-15 23:59:09

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
破洛洛文章简介：我们一般的做法是，把日期写在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:5px0;color:#333;border-bottom:1pxdashed#ccc}
.newslistspan{color:#888;float:right;text-align:right}
a{color:#333;text-decoration:none}
a:hover{color:blue;text-decoration:underline}
html部分:
<ul>
<liclass="newslist">·<ahref="#">10%无责补偿仍存交强惊</a>2008-11-28</li>
</ul>
我们一样平常的逻辑做法都是把日期写在旧事列表的前面。实在否则，我们应当把日期放在旧事列表的后面。至于为何要如许做，我还没找到很好的注释。

登录/注册后可看大图

准确的做法：
<ul>
<liclass="newslist">2008-11-28·<ahref="#">10%无责补偿仍存交强惊</a></li>
</ul>
全体代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无题目文档</title>
<styletype="text/css">

</style>
</head>
<body>
<ul>
<liclass="newslist">2008-11-28·<ahref="#">10%无责补偿仍存交强惊</a></li>
<liclass="newslist">2008-11-28·<ahref="#">百张奥运揭幕式门票赠予年夜发表！</a></li>
<liclass="newslist">2008-11-28·<ahref="#">出游买保险，赢好礼，蓝牙耳机、野餐包等你来拿！</a></li>
<liclass="newslist">2008-11-28·<ahref="#">10%无责补偿仍存交强惊</a></li>
<liclass="newslist">2008-11-28·<ahref="#">五周年绚丽好礼举动中奖名单第2期</a></li>
</ul>
</body>
</html>

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS实例教程:制造网页特别产物列表

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子