織夢dedecms 在做文章排行榜時，效果如下圖，這個排行主要有兩個知識點，其一是列表前面數字遞增，其二是列表的前三篇文章序號背景色藍色，其它序號背景是白色。 制作這種效果通常有兩種方法，一種是截圖法，一種是用織夢標簽autoindex，詳細方法如下： 方法一：把上圖文章前面的序號列表截圖，1-10的序號都在一個圖片上，之后把圖片設置為文章列表的背景圖片，用css調整其到合適的位置，設置文章列表合適的行寬，就可以了，這樣當顯示幾條文章時，就會顯示相應長度的背景。 方法二：用css設置不同樣式，例如，設置class=top為前三篇文章序號的樣式，而其它文章為默認，[field:global name=autoindex/]標簽可以遞增的熟練。代碼如下： <UL > <LI class="top"><EM>[field:global name=autoindex/]</EM><A title=[field:title/] href="[field:arcurl/]" target=_blank>[field:title/]</A></LI> <LI><EM>[field:global name=autoindex/]</EM><A title=[field:title/] href="[field:arcurl/]" target=_blank>[field:title/]</A></LI> </UL> 上面<li class="top">是藍色序號背景樣式，具體的css不演示，你可以設置成自己喜歡的樣式，而第二個<li>沒有class的樣式，我們要加個判斷條件，當序號小于3時（序號都是從0開始，所以前三項是0，1，2），<li>的class是top ，其它的沒有class。把上面的代碼，改為： <UL id=phc1 name="tabul"> {dede:artlist row='' orderby='hot'} <LI class="[field:global name=autoindex runphp="yes"] if(@me>3==0)@me="top"; else @me=""; [/field:global]"><EM>[field:global name=autoindex/]</EM><A title=[field:title/] href="[field:arcurl/]" target=_blank>[field:title/]</A></LI> {/dede:artlist} </UL> 即：把<li >中的top改成[field:global name=autoindex runphp="yes"] if(@me>3==0)@me="top"; else @me=""; [/field:global] 這樣就可以了，你可以去試一下。當然序號遞增主要用[field:global name=autoindex/] ，如果你想得到其它相關效果，可以在百度查相關關鍵字。 |
新聞熱點
疑難解答
