如何用css实现分页导航样式-css教程-PHP中文网

如何用css实现分页导航样式

P粉602998670

发布： 2025-10-30 12:05:02

原创

163人浏览过

答案：分页导航通过HTML无序列表构建结构，CSS实现-flex布局、样式美化与响应式设计，结合:hover和:disabled伪类增强交互，添加aria-current提升可访问性，确保用户清晰识别当前页与可点击项。

如何用css实现分页导航样式

实现分页导航样式主要通过HTML结构和CSS美化来完成。下面是一个简洁实用的分页导航实现方式，包含基本结构、样式设计和交互效果。

1. 基本HTML结构

使用无序列表 ul 来组织页码，便于语义化和样式控制：

2. 基础CSS样式

设置横向排列、去除列表默认样式、统一按钮外观：

.pagination { display: flex; justify-content: center; list-style: none; padding: 0; margin: 20px 0; } .pagination li a { display: inline-block; padding: 8px 12px; margin: 0 4px; text-decoration: none; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333; border: 1px solid https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bddd; border-radius: 4px; transition: background-color 0.3s ease; } .pagination li a:hover:not(.active) { background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bf0f0f0; border-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b999; } .pagination li a.active { background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b007bff; color: white; border-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b007bff; }

3. 美化与响应式优化

提升视觉效果并适配移动设备：

立即学习“前端免费学习笔记（深入）”；

沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

查看详情

使用圆角边框和阴影增强立体感
为小屏幕设置更合适的间距和字体大小
禁用状态可用 cursor: not-allowed 和浅色背景表示

.pagination li a:disabled { color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bccc; cursor: not-allowed; pointer-events: none; } @media (max-width: 480px) { .pagination li a { padding: 6px 10px; font-size: 14px; } }