html和css怎么实现上一页 1 2 下一页 这样分页布局的按钮，第二页默认选中

HTML 和 CSS 可以结合使用来创建分页布局的导航栏，通常会包含 "上一页"、"1"、"2"、"下一页" 等按钮，并将第二页标记为默认选中状态。这里是一个简单的示例：

首先，在 HTML 中构建基础结构：

<div class="pagination">
  <a href="#" class="previous-page">上一页</a>
  <span class="current-page">2</span>
  <a href="#" class="next-page">下一页</a>
</div>

然后，使用 CSS 来样式化这些元素并设置默认选中样式：

.pagination {
  display: inline-block;
}

.previous-page,
.next-page {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.current-page {
  font-weight: bold;
  color: blue; /* 或者使用伪类 :visited 设置蓝色 */
}

.previous-page:hover,
.next-page:hover {
  cursor: pointer;
  background-color: lightgray;
}

在这个例子中，`.current-page` 默认显示为数字 2 并加粗，表示当前页是第 2 页。`.previous-page` 和 `.next-page` 按钮有边框和鼠标悬停效果。

要让第二页默认选中，你可以添加一些 JavaScript 代码，比如 jQuery:

$(document).ready(function() {
  $('.current-page').text('2'); // 初始设置为2
});

如果你希望在用户交互时动态改变，可以考虑监听 `click` 事件：

$('.pagination a').click(function(e) {
  e.preventDefault(); // 阻止默认链接跳转
  var pageNum = parseInt($(this).prev('.current-page').text()); // 获取相邻的数字
  $(this).prevUntil('.current-page') // 从当前页开始向前选取
         .removeClass('current-page') // 移除所有已选择的状态
         .end().addBack() // 包含自身（因为可能点击的是 "上一页"）
         .eq(pageNum - 1) // 跳到对应的数字
         .addClass('current-page');
});