快捷導(dǎo)航

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

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

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

首先來(lái)寫cupage的css代碼:

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

然后來(lái)當(dāng)前頁(yè)碼的css:

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

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

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

復(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代碼即可.其他的翻頁(yè)樣式都大同小異,參照上面的講解慢慢改吧.
二.列表頁(yè)分頁(yè)代碼修改
會(huì)改了內(nèi)容頁(yè),列表頁(yè)就很容易了,都差不多,這里同樣以Digg Style為例.
首先來(lái)看看列表頁(yè)的分頁(yè)代碼:

復(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='#'>首頁(yè)</a> 
<strong>1</strong> 
<a href='#'>2</a> 
<a href='#'>下一頁(yè)</a> 
<a href='#'>末頁(yè)</a> 
</div> 
</div> 

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