So lösen Sie den Stil der Umblätterschaltfläche der Dedecms-Listenseitenliste-DEDECMS-php.cn

So lösen Sie den Stil der Umblätterschaltfläche der Dedecms-Listenseitenliste

藏色散人

Freigeben： 2020-01-08 09:25:27

Original

2633 Leute haben es durchsucht

Wie löse ich den Umblätterschaltflächenstil der Dedecms-Listenseitenliste?

Dedecms-Liste Die Lösung für die Startseite und den letzten Seitenstil der Seitenlisten-Seitenschaltfläche

Empfohlene Lerninhalte: Dreamweaver cms

Dedecms-Liste Die Schaltfläche zum Umblättern verwendet {dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}. Nach dem Generieren des HTML ist die erste Seite der Listenseite

<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>

Nach dem Login kopieren

und die letzte Seite Es ist:

<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>

Nach dem Login kopieren

Das CSS-Stylesheet der Standardvorlage:

.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; 
}

Nach dem Login kopieren

Sie können sehen, dass „.dede_pages ul li a“ und „.dede_pages ul li.thisclass“ beide haben padding: 2px 4px 2px; Attribute, aber „.dede_pages ul li“ nicht. Wenn „.dede_pages ul li“ nicht über das Attribut padding:2px 4px 2px; verfügt, sind die beiden Schaltflächen

Startseite

kleiner als andere Kleine, denken Sie darüber nach, wie hässlich diese Situation ist.

Das Folgende bietet zwei Lösungen für die oben genannten Probleme

Die erste Methode wird durch CSS gelöst. Diese Lösung besteht darin, das a-Tag nicht zu steuern und nur Stile hinzuzufügen li. Der Code lautet wie folgt:

rrree

Sie können sehen, dass der Code sehr prägnant ist, aber für die Benutzererfahrung nicht sehr gut ist. Dies sollte daran liegen, dass die aktuelle Schaltfläche von li anstelle von a angezeigt wird Wenn der Benutzer also auf die Schaltfläche klickt, wird dies der Fall sein. Wenn Sie nicht auf den Text klicken, klicken Sie nicht darauf. Für eine bessere Benutzererfahrung benötigen wir eine andere Lösung.

Die zweite Methode besteht darin, die dede:pagelist-bezogene Datei arc.listview.class.php im Include-Ordner zu ändern:

Öffnen Sie arc.listview.class.php und suchen Sie den folgenden Code:

.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;  
}

Nach dem Login kopieren

Ändern Sie $indexpage="

Homepage

rn";$endpage="

Last Page

rn"; ;li class="thisclass">Homepagern";$endpage="

Letzte Seite

rn";Nach der Änderung{dede:pagelist listitem ="index ,end,pre,next,pageno" listsize="10"/}Der generierte HTML-Code lautet wie folgt:

//获得上一页和主页的链接 
        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"; 
        }

Nach dem Login kopieren

Die zweite Methode ist einfacher und erhöht die Benutzererfahrung

PS: Verwenden Bei der zweiten Methode ist es nicht erforderlich, die CSS-Datei zu ändern.

Das obige ist der detaillierte Inhalt vonSo lösen Sie den Stil der Umblätterschaltfläche der Dedecms-Listenseitenliste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!