答案：使用HTML和CSS可创建简洁分页，通过flex布局实现居中对齐，CSS设置链接样式、悬停效果及当前页高亮，结合禁用状态优化交互体验。
在网页开发中，分页是一个常见的功能。使用 CSS 可以轻松实现一个简单、美观的分页样式。下面介绍如何用 HTML 和 CSS 制作基础的分页效果。
分页通常由一个容器包裹多个页码链接和“上一页”、“下一页”按钮组成：
<div class="pagination"> <a href="#" class="prev">« 上一页</a> <a href="#">1</a> <a href="#" class="active">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#" class="next">下一页 »</a> </div>
通过简单的 CSS 设置外观和布局：
.pagination {
display: flex;
justify-content: center;
margin: 20px 0;
list-style: none;
}
.pagination a {
color: #333;
padding: 8px 12px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 2px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.pagination a:hover:not(.active) {
background-color: #f0f0f0;
}
.pagination .active {
background-color: #007bff;
color: white;
border: 1px solid #007bff;
}
让分页更友好，可以添加一些细节增强体验：
立即学习“前端免费学习笔记（深入）”；
例如，禁用“上一页”按钮时：
.pagination .prev:disabled,
.pagination .prev.disabled {
opacity: 0.5;
pointer-events: none;
}
以上就是在css中如何制作简单分页样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
635
收藏
