效果图如下:
也许你会认为这个是很简单的,呵呵那是因为一般写这个列表的时候用的都是时间写在前面,标题写在后面,那样对于显示来说是先有时间后有标题的,对搜索引擎不是很友好。 老方法大概是这样的: html代码:
<li><span>2010-07-30</span><a href="#">css基础-基本知识点梳理</a></li>
这个大家应该都会,就是把span的float设置为right。 现在我们考虑另一种方案,把标题放在前面,时间放在后面看看 html代码:
<ul> <li><a href="#">css基础-基本知识点梳理</a>2010-07-30</li> <li><a href="#">css混排-左右交替2</a>2010-07-29</li> <li><a href="#">css优先级详解</a>2010-07-29</li> <li><a href="#">用css制作鼠标经过提示效果</a>2010-07-22</li> <li><a href="#">css图片替换文字技巧系列1-内联元素</a>2010-07-08</li> <li><a href="#">CSS列表系列1-炫酷列表</a>2010-07-05</li> </ul>
css代码如下:
ul{ background:#ededed; width:410px; margin-left:20px; padding:10px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } li{ padding:5px; text-align:right; width:400px; list-style:none; color:#F33; font-size:12px; border-bottom:1px solid #ccc; border-top:1px solid #efefef; } a{ margin-right:10px; float:left; text-decoration:none; font-size:13px; color:#999; }
关键是设置li的对齐方式为右对齐,即text-align:right;然后再设置a的浮动为左,即float:left;这就是解决问题的思路。其余的css为修饰之用。 简单方便且符合先重后次顺序还利于搜索引擎。
转载于:https://blog.51cto.com/osweb/732342