快捷導(dǎo)航

DEDECMS實(shí)用漂亮的翻頁效果修改方法第2/3頁

更新時(shí)間：2008年10月15日 22:25:11 作者：

有時(shí)候大家感覺dedecms的內(nèi)容分頁不太好看，下面的方法你就可以做出更好的分頁效果代碼

首先來寫cupage的css代碼:

 
.cupage { 
width:638px; 
text-align:center; 
line-height:31px; 
overflow:hidden;/*上面保留官方默認(rèn)的一些css代碼 下一行把Digg Style的DIV.digg的代碼復(fù)制過來 這里我做了些精簡 效果一樣 只是寫法不同*/ 
padding:3px; 
margin:3px; 
} 

然后來當(dāng)前頁碼的css:

復(fù)制代碼代碼如下:

 
.cupage strong { 
/*從DIV.digg SPAN.current復(fù)制過來即可 我這里同樣做了精簡*/ 
border: #000099 1px solid; 
padding:2px 5px; 
margin:2px; 
color:#fff; 
background-color:#000099; 
font-weight:bold; 
font-size:14px;/*此句定義字體大小 保留自官方的strong樣式*/ 
} ： 

下面來編寫A標(biāo)簽的樣式,它控制的是非當(dāng)前頁碼和上一頁.下一頁的樣式:

復(fù)制代碼代碼如下:

 
.cupage a { 
line-height:31px; 
font-size:14px;/*以上保留自官方css 下面的直接拷貝DIV.digg A中的樣式*/ 
border: #aaaadd 1px solid; 
padding:2px 5px; 
margin: 2px; 
color: #000099; 
text-decoration: none; 
} 
.cupage a:hover { 
/*鼠標(biāo)懸停的狀態(tài) 照搬DIV.digg A:active*/ 
border: #000099 1px solid; 
color: #000; 
} 
.cupage a:active { 
/*照搬DIV.digg A:active*/ 
border: #000099 1px solid; 
color: #000; 
} 

這樣css就寫完了,打開article.css,刪掉253-256行,加入上面的css代碼即可.其他的翻頁樣式都大同小異,參照上面的講解慢慢改吧.
二.列表頁分頁代碼修改
會改了內(nèi)容頁,列表頁就很容易了,都差不多,這里同樣以Digg Style為例.
首先來看看列表頁的分頁代碼:

復(fù)制代碼代碼如下:

 
<div class="pages"><div class="plist">{dede:pagelist listsize='4' listitem='index pre pageno next end '/}</div></div> 

生成后是:

復(fù)制代碼代碼如下:

 
<div class="pages"><div class="plist"> 
<a href='#'>首頁</a> 
<strong>1</strong> 
<a href='#'>2</a> 
<a href='#'>下一頁</a> 
<a href='#'>末頁</a> 
</div> 
</div> 

和內(nèi)容頁的差不多,簡單分析下.pages和plist控制整個(gè)分頁區(qū)域的樣式,依然是<strong></strong>控制當(dāng)前頁碼的樣式,其他的鏈接用的是A標(biāo)簽,這里的分頁沒
有內(nèi)容頁的bug,就是頁碼在第一頁的時(shí)候,上一頁的鏈接會不顯示,真搞不懂,列表頁都正常,內(nèi)容頁卻有bug,服了...
下面來寫css樣式:

復(fù)制代碼代碼如下:

 
.pages .plist{ 
float:left; 
line-height:17px; 
padding:3px; 
margin:3px; 
} 
.pages strong { 
display:block; 
float:left; 
border: #000099 1px solid; 
padding:2px 5px; 
margin:2px; 
color:#fff; 
background-color:#000099; 
font-weight:bold; 
} 
.plist a { 
display:block; 
height:17px; 
float:left; 
color:#000; 
border: #aaaadd 1px solid; 
padding:2px 5px; 
margin: 2px; 
color: #000099; 
text-decoration: none; 
} 
.plist a:hover{ 
border: #000099 1px solid; 
color: #000; 
} 
.plist a:active { 
border: #000099 1px solid; 
color: #000; 
} 