今天要查LCD的资料,跑到PConline去看,看到他们的文章列表觉得效果还好,如图:
无意间发现文章列表的页面代码写得很奇怪,首先他们用ul做文章列表这没错,接着又用另一个ul来放时间,之后用一个table把两部分拼起来,做成列表标题和时间都对齐的效果,如下(稍微调整了一下):
<table width="97%" cellspacing="5" cellpadding="0" border="0" align="center">
<tr>
<td width="85%"><ul>
<li>· <a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> </li>
<li>· <a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> </li>
<li>· <a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> </li>
<li>· <a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> </li>
<li>· <a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> </li>
<li>· <a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> </li>
</ul></td>
<td width="15%"><ul>
<li>[ 02-28 ]</li>
<li>[ 02-27 ]</li>
<li>[ 02-27 ]</li>
<li>[ 02-26 ]</li>
<li>[ 02-26 ]</li>
<li>[ 02-12 ]</li>
</ul></td>
</tr>
</table>
可以看出废码那是相当的多,而且语义很混乱,其实一个ul就够了,配合CSS做出对齐效果很简单,以下是我给出的代码:
<style type="text/css">
.list{
width:398px;
font-size:12px;
float:left;
}
.list ul{
display:block;
margin:0px;
padding:0px;
width:100%;
float:left;
}
.list ul li{
text-align:left;
display:block;
width:100%;
margin:2px 0px;
padding:0px;
list-style-position:inside;
float:left;
}
.list ul li a{
float:left;
display:block;
}
.list ul li span{
font-size:12px;
display:block;
float:right;
}
</style>
<div class="list">
<ul>
<li><a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> <span>[ 02-28 ]</span></li>
<li><a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> <span>[ 02-27 ]</span></li>
<li><a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> <span>[ 02-27 ]</span></li>
<li><a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> <span>[ 02-26 ]</span></li>
<li><a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> <span>[ 02-26 ]</span></li>
<li><a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> <span>[ 02-12 ]</span></li>
</ul>
</div>
[效果见这里](http://blog.94smart.com/html/list_date.html)
上面代码的div是用来从外层控制列表样式的,可以用其他块级元素替换,li里面的span用来放时间,也可以使用div等元素替换,另外其他所需的样式(如标题前的点)都可以用CSS定义,灵活度上升不少,不知道这样实现算不算是Unobtrusive的?