Comment résoudre le style de bouton de changement de page de la liste des pages de la liste Dedecms

Comment résoudre le style de bouton qui tourne la page de la liste des pages de la liste Dedecms ?

Liste Dedecms La solution pour la page d'accueil et le style de dernière page du bouton de page de liste de pages

Apprentissage recommandé : Dreamweaver cms

Liste Dedecms Le bouton de changement de page utilise {dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/} Après avoir généré le code HTML, la première page de la page de liste est

<li >首页</li> 
<li class="thisclass">1</li> 
<li><a href=&#39;news_2.html&#39;>2</a></li> 
<li><a href=&#39;news_3.html&#39;>3</a></li> 
<li><a href=&#39;news_2.html&#39;>下一页</a></li> 
<li><a href=&#39;news_3.html&#39;>末页</a></li>

. et la dernière page C'est :

<li><a href=&#39;news_1.html&#39;>首页</a></li> 
<li><a href=&#39;news_2.html&#39;>上一页</a></li> 
<li><a href=&#39;news_1.html&#39;>1</a></li> 
<li><a href=&#39;news_2.html&#39;>2</a></li> 
<li class="thisclass">3</li> 
<li >末页</li>

La feuille de style CSS du modèle par défaut :

.dede_pages{ 
} 
.dede_pages ul{ 
float:left; 
padding:12px 0px 12px 16px; 
} 
.dede_pages ul li{ 
float:left; 
font-family:Tahoma; 
line-height:17px; 
margin-right:6px; 
border:1px solid #E9E9E9; 
} 
.dede_pages ul li a{ 
float:left; 
padding:2px 4px 2px; 
color:#555; 
display:block; 
} 
.dede_pages ul li a:hover{ 
color:#690; 
text-decoration:none; 
padding:2px 4px 2px; 
} 
.dede_pages ul li.thisclass, 
.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{ 
background-color:#F8F8F8; 
padding:2px 4px 2px; 
font-weight:bold; 
}

Vous pouvez voir que ".dede_pages ul li a" et ".dede_pages ul li.thisclass" les deux ont un remplissage : 2px 4px 2px ; mais pas ".dede_pages ul li". Lorsque ".dede_pages ul li" n'a pas l'attribut padding:2px 4px 2px, les deux boutons

Home Page

boutons. Petit, pensez à quel point cette situation est laide.

Ce qui suit propose deux solutions aux problèmes ci-dessus

La première méthode est résolue via CSS. Cette solution consiste à ne pas contrôler la balise a et à ajouter uniquement des styles au. li. Le code est le suivant :

.dede_pages ul{  
}  
.dede_pages ul li{  
float:left;  
height:18px;  
line-height:18px;  
padding:4px 10px;  
margin-right:5px;  
border:1px #b9cdff solid;  
}  
.dede_pages .thisclass{  
background:#e3ebfe;  
}

Vous pouvez voir que le code est très concis, mais ce n'est pas très bon pour l'expérience utilisateur. Cela devrait l'être parce que le bouton actuel est affiché par li au lieu d'un. , donc lorsque l'utilisateur clique sur le bouton, il le fera. Si vous ne cliquez pas sur le texte, vous ne cliquez pas dessus. Pour une meilleure expérience utilisateur, nous avons besoin d'une autre solution.

La deuxième méthode consiste à modifier le fichier associé à dede:pagelist arc.listview.class.php dans le dossier include :

Ouvrez arc.listview.class.php et recherchez le code suivant :

//获得上一页和主页的链接 
        if($this->PageNo != 1) 
        { 
            $prepage.="<li><a href=&#39;".str_replace("{page}",$prepagenum,$tnamerule)."&#39;>上一页</a></li>rn"; 
            $indexpage="<li><a href=&#39;".str_replace("{page}",1,$tnamerule)."&#39;>首页</a></li>rn"; 
        } 
        else 
        { 
            $indexpage="<li >首页</li>rn"; 
        } 
        //下一页,未页的链接 
        if($this->PageNo!=$totalpage && $totalpage>1) 
        { 
            $nextpage.="<li><a href=&#39;".str_replace("{page}",$nextpagenum,$tnamerule)."&#39;>下一页</a></li>rn"; 
            $endpage="<li><a href=&#39;".str_replace("{page}",$totalpage,$tnamerule)."&#39;>末页</a></li>rn"; 
        } 
        else 
        { 
            $endpage="<li >末页</li>rn"; 
        }

Modifiez respectivement $indexpage="

Homepage

rn";$endpage="

Dernière page

rn" en $indexpage="< ;li class="thisclass">Page d'accueilrn";$endpage="

Dernière page

rn";Après modification{dede:pagelist listitem ="index ,end,pre,next,pageno" listsize="10"/}Le code html généré est le suivant :

<li class="thisclass">首页</li> 
<li class="thisclass">1</li> 
<li><a href=&#39;news_2.html&#39;>2</a></li> 
<li><a href=&#39;news_3.html&#39;>3</a></li> 
<li><a href=&#39;news_2.html&#39;>下一页</a></li> 
<li><a href=&#39;news_3.html&#39;>末页</a></li>

La deuxième méthode est plus simple et augmente l'expérience utilisateur

PS : Utilisation la deuxième méthode, il n'est pas nécessaire de modifier le fichier CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!