在网页设计中，分页（pagination）是一种常见的用户界面元素，通常用于展示长列表或多页内容。以下是一个使用 CSS3 创建基本分页的示例：

HTML：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>CSS3 Pagination</title>
</head>
<body>
    <div class="pagination">
        <a href="#" class="prev">&laquo; Previous</a>
        <a href="#" class="page">1</a>
        <a href="#" class="page">2</a>
        <a href="#" class="page active">3</a>
        <a href="#" class="page">4</a>
        <a href="#" class="page">5</a>
        <a href="#" class="next">Next &raquo;</a>
    </div>
</body>
</html>

CSS (styles.css)：
/* 基本样式 */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 分页项样式 */
.pagination a {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
}

/* 当前页样式 */
.pagination a.active {
    background-color: #3498db;
    color: #fff;
}

/* 上一页、下一页样式 */
.pagination a.prev,
.pagination a.next {
    background-color: #3498db;
    color: #fff;
}

/* 悬停时的样式 */
.pagination a:hover {
    background-color: #ddd;
}

这个示例创建了一个基本的分页组件，包含上一页、下一页和若干页码。你可以根据需要调整样式，例如更改颜色、大小、边框等，以适应你的网站设计。此外，你还可以使用 JavaScript 来实现更复杂的分页功能，例如动态加载内容。


转载请注明出处：http://www.zyzy.cn/article/detail/12572/CSS