在網(wǎng)上流傳很廣,壇子里也有幾個人都轉(zhuǎn)過,這里說下怎么用(教程以默認(rèn)模板為例). 一.內(nèi)容頁分頁代碼修改 首先介紹下基礎(chǔ)知識,dede的內(nèi)容頁調(diào)用標(biāo)記是: 復(fù)制代碼 代碼如下:<div class="cupage">{dede:pagebreak/}</div> 生成html后形式為: 復(fù)制代碼 代碼如下:<div class="cupage"><a href='#'>上一頁</a><strong>1</strong><a href='#'>2</a> <a href='#'>下一頁</a></div> 這里分析下,cupage的class控制整個分頁區(qū)域的樣式,"上一頁"和"下一頁"的樣式可以通過控制A標(biāo)簽的樣式來更改,而當(dāng)前頁,比如這里的"1"是用 <strong></strong>標(biāo)記包圍的,當(dāng)然可以通過定義<strong>標(biāo)記的樣式實現(xiàn)當(dāng)前頁碼與其他頁碼的樣式不同. 然后再分析下下載的翻頁效果代碼,我們以第一個Digg Style為例. 首先看下Digg Style的html代碼:復(fù)制代碼 代碼如下:<div class="digg"> <span class="disabled"> < </span> <span class="current">1</span> <a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#? page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a> <a href="#?page=2"> > </a> </div> 名為digg的class跟cupage作用一樣,控制整個分頁區(qū)域的樣式,它這里的上一頁和下一頁用<和>代替了,而且設(shè)置了不同的樣式,因為如果在第一頁的話,上一頁 這個鏈接是不可用的,所以區(qū)別了下一頁的樣式,但是dede在這里有個bug,從生成的html的代碼也可以看出,當(dāng)頁碼在第一頁的時候,那個上一頁依然是可點的,這個后面會給出解決方法.名為current的class控制的是當(dāng)前頁碼的樣式,這個和dede的<strong>標(biāo)簽的樣式是一樣的作用,像2.3...這樣的頁碼樣式和dede的一樣,都用的是A標(biāo)簽,把這里的A標(biāo)簽的css搬到dede里就行了. 好了,分析到這就可以對照著Digg Style的css重寫dede的分頁css了, Digg Style的css:復(fù)制代碼 代碼如下:DIV.digg { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center } DIV.digg A { BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none } DIV.digg A:hover { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg A:active { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg SPAN.current { BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING- BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR:
新聞熱點
疑難解答
圖片精選
