使用HTML5开发响应式分页布局，让你的网页更加优雅和易读

6 min read

可以使用以下代码来实现一个简单的分页布局：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>分页布局</title>
    <style>
      .page {
        display: inline-block;
        padding: 8px 16px;
        background-color: #f1f1f1;
        border-radius: 5px;
        margin: 5px;
        font-size: 16px;
      }
      
      .active {
        background-color: #4CAF50;
        color: white;
      }
    </style>
  </head>
  
  <body>
    <div>
      <a href="#" class="page active">1</a>
      <a href="#" class="page">2</a>
      <a href="#" class="page">3</a>
      <a href="#" class="page">4</a>
      <a href="#" class="page">5</a>
    </div>
  </body>
</html>

在上面的代码中，我们使用了<a>标签来创建每个分页按钮，并使用CSS样式来设置它们的样式。每个按钮都有一个page类，并且在当前活动页上使用active类来突出显示。您可以根据需要复制和粘贴按钮，并使用JavaScript来动态生成按钮，或者在前面和后面添加<和>按钮以进行向前和向后翻页。