HTML分页导航器基础示例

让我们创建一个基本的HTML文件，包含分页导航器的基本结构和样式,这个例子将使用纯CSS实现简单而有效的分页功能。

文件结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Simple Page Navigation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .page-navigation {
            text-align: center;
        }
        .page-button {
            display: inline-block;
            padding: 5px 10px;
            margin: 5px;
            cursor: pointer;
            border-radius: 3px;
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s;
        }
        .active-page-button {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div class="page-navigation">
    <button onclick="changePage('1')">First</button>
    <button onclick="changePage('2')">Previous</button>
    <button onclick="changePage('3')">Next</button>
    <button onclick="changePage('4')">Last</button>
</div>
<script>
function changePage(page) {
    // 在这里添加逻辑来改变当前显示的页面
}
</script>
</body>
</html>

如何工作

点击按钮：每个按钮都有一个onclick属性，当用户点击时，它会调用changePage函数并传入相应的页码。
切换页码：changePage函数可以根据传递的参数更新当前显示的页码，在这个例子中，我们没有实际的功能,但你可以在此处添加JavaScript逻辑来动态更改页面内容。