CSS样式 - 分页按钮样式

最新推荐文章于 2022-06-07 11:35:18 发布

原创最新推荐文章于 2022-06-07 11:35:18 发布 · 8.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #分页

前端开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML与CSS实现的分页组件示例，包括基本的HTML结构和对应的CSS样式，展示了如何通过简单的标签和样式实现网页上的分页导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<div class="pagination">
    <span class="disabled" title="首页">首页</span>
    <span class="disabled" title="上一页">上一页</span>
    <span class="current">1</span><span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>下一页</span>
    <span>尾页</span>
</div>

CSS

/*样式一*/
.pagination{ text-align: center;font-size: 12px;padding: 10px 0;display:inline-block}
.pagination a,.pagination span{display: inline-block;padding: 0 10px;height: 28px;line-height: 28px;border: 1px solid #ddd;border-radius: 4px;text-decoration: none;color: #999;cursor: pointer;  margin-right:5px;}
.pagination a:hover:not(.disabled):not(.current),.pagination span:hover:not(.disabled):not(.current){color:#f04848}
.pagination a.disabled,.pagination span.disabled{color: #bfbfbf;background: #f5f5f5;cursor: no-drop;border: 1px solid #ddd;}
.pagination a.current,.pagination span.current{color: #fff;background: #f04848;border: 1px solid #f04848;}