>CMS 튜토리얼 >Dedecms >Dedecms 목록 페이지 목록의 페이지 넘기기 버튼 스타일을 해결하는 방법

Dedecms 목록 페이지 목록의 페이지 넘기기 버튼 스타일을 해결하는 방법

藏色散人
藏色散人원래의
2020-01-08 09:25:022744검색

Dedecms 목록 페이지 목록의 페이지 넘기기 버튼 스타일을 해결하는 방법

Dedecms 목록 페이지 목록 페이지 넘김 버튼 스타일을 해결하는 방법은 무엇인가요?

Dedecms 목록 페이지 목록 페이지 전환 버튼의 홈페이지 및 마지막 페이지 스타일 솔루션

추천 학습: Dreamweavercms# 🎜🎜#

Dedecms 목록 페이지 넘기기 버튼은 {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"에는 padding:2px 4px 2px; 속성이 있지만 ".dede_pages ul li"에는 없습니다. ".dede_pages ul li"에 padding:2px 4px 2px; 속성이 없으면

  • 홈 페이지
  • 마지막 페이지
  • 버튼이 작아요. 이 상황이 얼마나 추악한지 생각해 보세요.

    위의 문제에 대한 두 가지 해결 방법은 다음과 같습니다.

    첫 번째 방법은 CSS를 통해 해결되는 방법입니다. li에만 스타일을 추가합니다. 코드는 다음과 같습니다.

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

    코드가 매우 간결하다는 것을 알 수 있지만 현재 버튼이 다음과 같기 때문일 것입니다. a 대신 li로 표시되므로 사용자가 버튼을 클릭했지만 텍스트를 클릭하지 않으면 버튼이 클릭되지 않았음을 의미합니다. 더 나은 사용자 경험을 위해서는 또 다른 솔루션이 필요합니다.

    두 번째 방법은 include 폴더에 있는 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="

  • Homepage
  • rn";$endpage="
  • 마지막 페이지
  • rn"; $indexpage="
  • Homepage
  • rn";$endpage="
  • 마지막 페이지
  • rn";에 대해 수정되었습니다. {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>

    두 번째 방법은 더 간단하고 더 많은 것을 추가합니다. 사용자 경험

    PS: 두 번째 방법을 사용하면 CSS 파일을 수정할 필요가 없습니다.

    위 내용은 Dedecms 목록 페이지 목록의 페이지 넘기기 버튼 스타일을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.