分享一個展示文章列表的CSS樣式

最近在幫朋友處理一個網站前端顯示文章列表的時候,其中有個變通的思路,現整理出來留給有需要的朋友參考及自己備忘.

1. 顯示效果為:標題左對齊,日期右對齊.
2. 標題和日期中間用常規的原點(“.”) 代替,顯示效果如下圖所示.

  

  至於第一點要求,很容易就實現了,將日期顯示的東東,加上 “ float:right “基本上就搞定了.

  但第二點要求: 中間顯示原點這個試了很多方式:

  比如后台在返回數據的時候,根據標題文字長度自動補齊原點字符串一起返回到前端展示.

  或者在前端通過js計算字符長度然后補齊.

  但最后展示的效果確並不理想.

 而后,突然想到,干嘛不降這個”小原點 ”作為每個項的背景圖並在橫向重復顯示(repeat-x),讓標題和日期直接顯示其上即可. 經嘗試,確實就ok了, 下面貼上這個解決方案的css代碼供大家參考.

.data ul {
list-style: none;
margin-top: 5px;
}
.data ul li {
height: 30px;
}
.list {
margin: 0px 10px 20px;
text-align: left;
}
.list li {
width: 100%;
background: url(imgs/list_line_point.jpg) repeat-x;
font-size: 1.2em;
margin: 5px 0px 5px 0px;
}
.list li span.left {
background-color: #e3e3e3;
padding: 0px 13px 0px 13px;
}
.list li span.right {
float: right;
text-align: right;
background-color: #e3e3e3;
padding: 0px 13px 0px 13px;
}

順便貼一下,前端使用的html:

<div class="data" id="data_list">
    <ul id="data_list_ul" class="list">
            <li><a href="/Front/ArticleDetail/faf248f0-bce7-4b76-8ddf-14e728021b76" target="_blank">
                <span class="left"> 澳大利亞球手包攬中國業余公開賽男女組冠軍</span> 
                <span class="right">2014-11-17</span></a>
            </li>
            <li><a href="/Front/ArticleDetail/426396fc-66b0-4853-9c53-2ac973ee9c77" target="_blank">
                <span class="left">美巡中國賽首個業余冠軍誕生</span> 
                <span class="right">2014-11-17</span></a>
            </li>      
    </ul>
</div>

界面顯示效果,可參見 http://www.cagr.cn/Front/News .

后記,  我本不擅長前端,只是略知一二,各位看官如果覺得累贅,還望能輕拍.