<b id="upvzu"></b>

<samp id="upvzu"><td id="upvzu"></td></samp>

      1. <source id="upvzu"></source>

      1. 織夢園模板網提供云優cms模板,pbootcms模板,Wordpress主題模板等各類企業新聞資訊網站模板下載服務。織夢園網站模板交流群
        用戶名:
        密碼:
        注冊
        注冊后享受折扣價

        PbootCMS分頁條效果之數字條效果

        織夢園模板 / 2022-02-09 / 收藏

        數字條自帶a鏈接標簽代碼和選中效果標簽

        數字帶class名稱為 page-num,當前頁自帶 page-num-current 樣式

        <!-- 分頁 -->
        {pboot:if({page:rows}>0)}
          <div class="pagebar">
            <div class="pagination">
              <a class="page-item page-link hidden-sm" href="{page:index}" title="首頁">首頁</a>
              <a class="page-item page-link" href="{page:pre}" title="上一頁">上一頁</a>
              {page:numbar}
              <a class="page-item page-link" href="{page:next}" title="下一頁">下一頁</a>
              <a class="page-item page-link hidden-sm" href="{page:last}" title="尾頁">尾頁</a>
            </div>
          </div>	
        {else}
          <div class="tac text-secondary">本分類下無任何數據!</div>
        {/pboot:if}

        需要給數字條里的span標簽單獨設置樣式,使分頁條更美觀好看

        數字條樣式分頁條適合企業網站,行業網站使用

        CSS樣式代碼

        /* ----- PB分頁數字條效果 結束 ----- */
        .pagebar .pagination {
          display: flex;
          justify-content: center;
          margin-top: 10px;
        }
        .pagination a {
          background: #fff;
          border: 1px solid #ccc;
          color: #333;
          font-size: 14px;
          padding: 8px 12px;
          margin: 0 5px;
          border-radius: 3px;
        }
        .pagination span {
            color: #333;
            font-size: 14px;
            padding: 8px 2px;
            margin: 0 5px;
            border-radius: 3px;
        }
        .pagination a:hover {
          color: #4fc08d;
          border: 1px solid #4fc08d;
        }
        .pagination a.page-num-current {
          color: #fff;
          background: #4fc08d;
          border: 1px solid #4fc08d;
        }
        /* ----- PB分頁數字條效果 結束 ----- */
        顯示效果如下圖所示

         

        相關PbootCMS教程

        收縮
        4国产精品无码制服丝袜|国内午夜国产精品小视频|国产特黄特色a级在线视频|99热在线精品国产观看
        <b id="upvzu"></b>

        <samp id="upvzu"><td id="upvzu"></td></samp>

            1. <source id="upvzu"></source>