九草国产精品|极品熟妇喷水在线播放|亚洲无码卡通动漫亚洲一区|v视界制服诱惑一区三区

首頁

HTML編輯代碼之快速分頁的實現(xiàn)

快速分頁 2018-04-13 5517

對于程序技術人員處理一些比較多的數(shù)據(jù)時,有時候一頁放不下,那么這個時候往往要用到分頁顯示,就像平常我們翻看有一些新聞資訊一樣,有下一頁,下二頁等等,那么今天app開發(fā)報價燚軒科技跟大家分享的就是如何快速實現(xiàn)分頁技術,下面就進入到正題吧。

代碼實現(xiàn)部分:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="jquery.min.js"></script>

    <script src="fenye.js"></script>

    <link rel="stylesheet" href="fenye.css">

    <style>

        main {

            width: 1024px;

            margin: 0 auto;

        }

        .fenye {

            padding: 10px;

            border: 1px solid red;

            margin: 10px 0;

        }

        .one {

            border: 1px solid black;

            margin: 30px 0;

            display: block;

            color: black;

            display: flex;

            justify-content: center;

        }

        .pages {

            border: 1px solid red;            

        }

    </style>    

</head>

<body>

    <main>

        <div class="main">

            <div class="fenye">

                <div class="one">1</div>

                <div class="one">2</div>

                <div class="one">3</div>

                <div class="one">4</div>

                <div class="one">5</div>

                <div class="one">6</div>

            //  有幾個分頁就寫幾個分頁

            </div>

            <div class="pages">

            </div>

        </div>

    </main> 

    <script>

            //  需要引入Jquery

            //          循環(huán)    上一頁下一頁的容器  每頁顯示幾個

            fenye(   $(".one"),    $(".pages"),      4     )

    </script>

</body>

</html>

那么看完之后大家可以開始嘗試去實現(xiàn)以下了,如果還存在一些不清楚的地方的話,可以留言咨詢我們,我們會很快幫您解答的。

分享到微信朋友圈 +
打開微信,點擊底部的“發(fā)現(xiàn)”,使用 “掃一掃” 即可將網(wǎng)頁分享到我的朋友圈。 如何使用?
推薦文章

熱貼More +

服務范圍More +

聯(lián)系我們

請掃二維碼聯(lián)系客服

854221200@qq.com

185-3825-9583

QQ客服

關于  ·  招聘  ·  案例中心  ·  網(wǎng)站地圖

?@2018 燚軒科技版權所有 豫ICP備16015002號-4

百度提供搜索支持