Dedecmsリストページリストのページめくりボタンのスタイルを解決する方法

Dedecms リスト ページリスト ページめくりボタン スタイルを解決するにはどうすればよいですか?

Dedecms リスト ページリスト ホームページとページめくりボタンの最終ページ スタイルの解決策

推奨学習: 梦Weavercms

Dedecms list ページめくりボタンは {dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/} を使用します。html 生成後のリスト ページの最初のページは

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

になります。最後のページです:

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

デフォルト テンプレートの CSS スタイル シート:

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

「.dede_pages ul li a」と「.dede_pages ul li.thisclass」の両方が確認できます。パディング: 2px 4px 2px; 属性がありますが、「.dede_pages ul li」にはありません。 「.dede_pages ul li」にpadding:2px 4px 2px; 属性がない場合、2 つのボタン 861f448a2c47375a88adcb954dabc953ホームページbed06894275b65c1ab86501b08a632eb と 861f448a2c47375a88adcb954dabc953最後のページbed06894275b65c1ab86501b08a632eb は他のボタンより小さくなります。小さなボタン、この状況がどれほど醜いのか考えてみましょう。

以下は、上記の問題に対する 2 つの解決策を提供します。

最初の方法は、CSS によって解決されます。この解決策は、a タグを制御せず、スタイルを追加するだけです。コードは次のとおりです:

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

コードは非常に簡潔ですが、ユーザー エクスペリエンスにとってはあまり良くありません。これは、現在のボタンが li ではなく li で表示されているためであると考えられます。つまり、ユーザーがボタンをクリックすると、テキストをクリックしなければ、テキストをクリックしたことにはなりません。ユーザーエクスペリエンスを向上させるには、別のソリューションが必要です。

2 番目の方法は、インクルード フォルダー内の dede:pagelist 関連ファイル arc.listview.class.php を変更することです。

arc.listview.class.php を開いて、次のコードを見つけます。

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

$indexpage="861f448a2c47375a88adcb954dabc953ホームページbed06894275b65c1ab86501b08a632ebrn";$endpage="861f448a2c47375a88adcb954dabc953最後のページbed06894275b65c1ab86501b08a632ebrn"; を $indexpage="< ; に変更します。 li class="thisclass">ホームページbed06894275b65c1ab86501b08a632ebrn";$endpage="3004742524ccc3b949f24d57841be344最後のページbed06894275b65c1ab86501b08a632ebrn";変更後{dede:pagelist listitem ="index, end,pre,next,pageno" listsize="10"/}生成される HTML コードは次のとおりです。

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

2 番目の方法はより簡単で、ユーザー エクスペリエンスが向上します

PS: 2 番目の方法では、CSS ファイルを変更する必要はありません。

以上がDedecmsリストページリストのページめくりボタンのスタイルを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。