CSS原生分页样式

最新推荐文章于 2022-05-31 21:47:07 发布

靡_初

最新推荐文章于 2022-05-31 21:47:07 发布

阅读量346

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/kettlo/article/details/115557836

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

制作分页样式可以利用行内块元素的特点实现（不使用浮动）
在这里插入图片描述

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    text-align: center;
}

.box a {
    text-align: center;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    line-height: 40px;
    text-decoration: none;
    color: black;
}

.box .prev,
.box .next {
    width: 100px;
}

.box .current,
.box .elp {
    background-color: white;
    border: none;
}

.box input {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
}

.box button {
    width: 40px;
    height: 40px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
}

靡_初

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS原生分页样式

制作分页样式可以利用行内块元素的特点实现（不使用浮动）<body> <div class="box"> <a href="#" class="prev">&lt;&lt;上一页</a> <a href="#" class="current">2</a> <a href="#">3</a> <a href="#"&gt
复制链接

扫一扫

专栏目录