做網站,我們是認真的!

網站適配電腦+手機端,僅1280元,送2000M阿里云服務器,送com域名+免費備案
網站前端采用靜態系統顯示,后端動態管理,我們承諾網站包收錄,完成網站之后把源碼給客戶!

觀點

互聯網+時代,說建站,談運營與網絡營銷

織夢dedecms排行榜制作

時間:2020-12-16

織夢dedecms 在做文章排行榜時,效果如下圖,這個排行主要有兩個知識點,其一是列表前面數字遞增,其二是列表的前三篇文章序號背景色藍色,其它序號背景是白色。

織夢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/] ,如果你想得到其它相關效果,可以在百度查相關關鍵字。

0
首頁
案例
關于
聯系
凯时平台