使用Flex布局可轻松创建美观分页组件：1. 用ul构建分页结构，包含上/下一页和页码按钮；2. 通过display:flex实现水平排列与居中对齐，gap设置间距；3. 为a标签添加样式，利用.active高亮当前页，transition实现过渡效果；4. 响应式设计适配小屏幕，调整padding和字体大小；5. 结合语义化HTML与CSS交互状态，提升用户体验。
分页组件是网页中常见的交互元素，尤其在内容列表较多时用于分页导航。使用 CSS 的 Flex 布局可以轻松实现分页项的对齐与分布，结合 active 状态能直观标识当前页。下面是一个简单的 CSS 初级项目示例，教你如何用 Flex 布局制作一个美观且可交互的分页组件。
分页组件通常由一组数字按钮和“上一页”、“下一页”组成。我们使用无序列表 来构建结构，保持语义清晰：
<div class="pagination">
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
通过 Flex 布局让分页项水平排列并居中显示，容器自动分配间距：
.pagination {
display: flex;
justify-content: center;
margin: 20px 0;
}
<p>.pagination ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
}
为分页链接添加统一样式，并突出当前页（active）：
立即学习“前端免费学习笔记（深入）”；
.pagination a {
text-decoration: none;
padding: 8px 12px;
border: 1px solid #ddd;
color: #007bff;
border-radius: 4px;
transition: all 0.3s ease;
}
<p>.pagination a:hover {
background-color: #007bff;
color: white;
border-color: #007bff;
}</p><p>.pagination a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
cursor: default;
}
在小屏幕上，可适当缩小按钮尺寸以适应屏幕：
@media (max-width: 600px) {
.pagination a {
padding: 6px 10px;
font-size: 14px;
}
}
基本上就这些。通过 Flex 布局快速搭建结构，再用 CSS 控制外观和交互状态，就能完成一个实用的分页组件。不复杂但容易忽略细节，比如去掉默认列表样式、设置圆角和过渡效果，能让组件更专业。后续可结合 JavaScript 实现动态页码切换。
以上就是CSS初级项目如何制作分页组件_flex布局与active状态控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
874
收藏
