分页组件创建

最新推荐文章于 2023-10-21 17:50:18 发布

「已注销」

最新推荐文章于 2023-10-21 17:50:18 发布

阅读量207

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_44595744/article/details/103058745

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

分页组件

1.创建文件
2.定义基础样式
3.封装的各种不同的组件样式

具体步骤

1.定义基础类jc-pagination

代码如下:
html文件

<h3>.jc-pagination是分页的基础样式</h3>
    <nav class="page">
        <ul class="jc-pagination">
            <li class="pre">
                <a href="#">&laquo;</a>
                <!-- &laquo为<< -->
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next">
                <a href="#">&raquo;</a>
                 <!-- &raquo为>> -->
            </li>
        </ul>
    </nav>

css文件

/* 这里写分页的样式 */
.page{
    width: 100%;
}
.jc-pagination{
    display: inline-block;
    margin: 0 15px;
}
.jc-pagination>li>a{
    display: inline-block;
    text-decoration: none;
    padding:15px;
    border: 1px solid #ccc;
    color: #383030;
}
.jc-pagination>li{
    display: inline-block;
    list-style: none;
}

效果图：
在这里插入图片描述

2.其他样式的分页

html文件

	<h3>.jc-pagination-bgc  表示带有背景颜色的分页</h3>
    <nav class="page">
        <ul class="jc-pagination jc-pagination-bgc">
            <li class="pre">
                <a href="#">&laquo;</a>
               <!-- &laquo为<< -->
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next">
                <a href="#">&raquo;</a>
                <!-- &raquo为>> -->
            </li>
        </ul>
    </nav>
    <h3>.jc-pagination-nobgc 表示没有边框，没有背景色的分页</h3>
    <nav class="page">
        <ul class="jc-pagination jc-pagination-noBgc">
            <li class="pre">
                <a href="#">&laquo;</a>
                <!-- &laquo为<< -->
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next">
                <a href="#">&raquo;</a>
                 <!-- &raquo为>> -->
            </li>
        </ul>
    </nav>
    <h3>.jc-pagination-inverse 表示背景色为黑色的分页</h3>
    <nav class="page">
        <ul class="jc-pagination jc-pagination-inverse">
            <li class="pre">
                <a href="#">&laquo;</a>
                <!-- &laquo为<< -->
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next">
                <a href="#">&raquo;</a>
                 <!-- &raquo为>> -->
            </li>
        </ul>
    </nav>
    <h3>.jc-pagination-inverse-lg 表示大分页 字体变大16px</h3>
    <nav class="page">
        <ul class="jc-pagination jc-pagination-inverse-lg">
            <li class="pre">
                <a href="#">&laquo;</a>
                <!-- &laquo为<< -->
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next">
                <a href="#">&raquo;</a>
                 <!-- &raquo为>> -->
            </li>
        </ul>
    </nav>

css文件

.jc-pagination-bgc>li>a{
    background-color: #f4f4f5;
    border: 1px solid #f4f4f5;
    color: #303133;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
}
.jc-pagination-bgc .active a{
    background-color: #0653fa;
    color: #fafafa;
}
.jc-pagination-bgc>li>a:hover{
    background-color: #0653fa;
    color: #fafafa;
}
.jc-pagination-noBgc>li>a{
    color: #303133;
    font-size: 16px;
    padding:5px;
    border: 1px solid transparent;
    font-weight: 900;
}
.jc-pagination-noBgc .active>a{
    color: #0653fa;
}
.jc-pagination-noBgc>li>a:hover{
    color: #0653fa;
}
.jc-pagination-inverse>li>a{
    background-color: #393d49;
    color: #ccc;
    font-size: 14px;
    border: 1px solid #393d49;
    padding: 5px 10px;
}
.jc-pagination-inverse>li{
    float: left;
}
.jc-pagination-inverse>li>a:hover{
    background-color: #000;
    color:#fff;
    border: 1px solid #000;
}
.jc-pagination-inverse .active>a{
    background-color: #000;
    color:#fff;
    border: 1px solid #000;
}
.jc-pagination-inverse-lg>li>a{
    background-color: #393d49;
    color: #ccc;
    font-size: 16px;
    border: 1px solid #393d49;
    padding: 8px 12px;
}
.jc-pagination-inverse-lg>li>a:hover{
    background-color: aqua;
    color:#fff;
    border: 1px solid #000;
}
.jc-pagination-inverse-lg .active>a{
    background-color: aqua;
    color:#fff;
    border: 1px solid #000;
}
.jc-pagination-inverse-lg>li{
    float: left;
}

效果图：
在这里插入图片描述

总结

目前分页组件也是使用比较频繁的，需要的话可以封装一下，便于后期自己想用分页组件，大家可以作为一个参考，做出自己的分页组件。

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页组件创建

分页组件分页组件1.创建文件2.定义基础样式3.封装的各种不同的组件样式具体步骤1.定义基础类jc-pagination代码如下:html文件<h3>.jc-pagination是分页的基础样式</h3> <nav class="page"> <ul class="jc-pagination"> ...
复制链接

扫一扫

专栏目录