数据分页的实现

最新推荐文章于 2024-06-30 19:40:55 发布

傻她你呀

最新推荐文章于 2024-06-30 19:40:55 发布

阅读量1.4k

点赞数

分类专栏：视频播放器的设计 CSS3 web布局设计文章标签：数据分页的实现

本文链接：https://blog.csdn.net/qq_41672008/article/details/102745889

版权

数据分页的实现

今天在做项目的过程当中遇到了数据分页，说到数据分页，相信都不会陌生，平常百度的时候都会遇到：
这个算是比较经典的，今天特意实现一下数据分页，以下是我的效果图：
可以进行页数搜索，像这样：
外观看起来比较好看，也很好用

代码下载地址：

https://github.com/shataniya/csdn-Data-paging-implementation

话不多说，直接上代码

以下是基本的布局 demo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="./demo.css">
        <title>demo</title>
    </head>
    <body>
        <div class="container">
            <div class="prev">prev</div>
            <ul class="page">
                <li class="page-item">1</li>
                <li class="page-item">2</li>
                <li class="page-item">3</li>
                <li class="page-item">4</li>
                <li class="page-item">5</li>
            </ul>
            <div class="next">next</div>

最低0.47元/天解锁文章

傻她你呀

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
数据分页的实现

数据分页的实现今天在做项目的过程当中遇到了数据分页，说到数据分页，相信都不会陌生，平常百度的时候都会遇到：这个算是比较经典的，今天特意实现一下数据分页，以下是我的效果图：可以进行页数搜索，像这样：外观看起来比较好看，也很好用话不多说，直接上代码以下是基本的布局 demo.html<!DOCTYPE html><html> <hea...
复制链接

扫一扫

专栏目录