微博的搜索功能需要对搜索结果进行分页展示，每页显示 10 条数据。请设计一个前端分页组件，要求能够根据总数据量和当前页码显示正确的分页按钮，并且支持点击页码切换页面。请用 HTML、CSS 和 JavaScript 实现。

答题要点

使用分层分析法，从 HTML 结构、CSS 样式、JavaScript 逻辑三个层面分析。关键要点：1. HTML 结构：创建一个包含页码按钮的容器，使用 `ul` 和 `li` 标签来实现。2. CSS 样式：设置按钮的样式，如背景色、边框、字体大小等，同时处理按钮的悬停和选中状态。3. JavaScript 逻辑：计算总页数，根据当前页码显示正确的页码按钮，为按钮绑定点击事件，点击时更新当前页码并重新渲染分页组件。示例：在 HTML 中创建一个 `ul` 元素作为分页容器，在 CSS 中设置 `li` 元素的样式，在 JavaScript 中根据总数据量和每页显示数量计算总页数，使用循环生成页码按钮，为按钮添加点击事件监听器，点击时更新当前页码并重新生成按钮。