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

標籤：style   blog   http   ar   color   使用   sp   資料   on   

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

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 .

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

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