首页

HTML编辑代码之快速分页的实现

快速分页 2018-04-13 5902

对于程序技术人员处理一些比较多的数据时,有时候一页放不下,那么这个时候往往要用到分页显示,就像平常我们翻看有一些新闻资讯一样,有下一页,下二页等等,那么今天app开发报价燚轩科技跟大家分享的就是如何快速实现分页技术,下面就进入到正题吧。

代码实现部分:

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

            //          循环    上一页下一页的容器  每页显示几个

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

    </script>

</body>

</html>

那么看完之后大家可以开始尝试去实现以下了,如果还存在一些不清楚的地方的话,可以留言咨询我们,我们会很快帮您解答的。

分享到微信朋友圈 +
打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。 如何使用?
推荐文章

热贴More +

服务范围More +

联系我们

请扫二维码联系客服

854221200@qq.com

185-3825-9583

QQ客服

关于  ·  招聘  ·  案例中心  ·  网站地图

©@2018 燚轩科技版权所有 豫ICP备16015002号-4

百度提供搜索支持