css上一页下一页盒子

上一页下一页盒子是常见的网页设计元素，它可以为网页提供导航功能，让用户方便地浏览网页内容。在制作上一页下一页盒子时，常常使用CSS来设置样式，使之更加美观、实用。下面我们来看一下如何通过CSS实现上一页下一页盒子。

/*设置上一页下一页盒子的样式*/
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.pagination a {
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 4px;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a:hover {
  background-color: #ddd;
} 

上面的CSS代码设置了上一页下一页盒子的样式，其中使用了Flex布局来让元素水平居中对齐。样式中设置了链接的背景颜色、字体颜色和边框圆角等属性，并使用了hover伪类来设置鼠标滑过链接时的背景颜色。

下面是HTML代码示例，使用了font-awesome图标库来为链接添加翻页图标：

<div class="pagination">

  <a href="#"><i class="fa fa-angle-left"></i> 上一页</a>

  <a href="#">下一页 <i class="fa fa-angle-right"></i></a>

</div> 

上面的HTML代码示例中，使用了FontAwesome图标库来为链接添加了翻页图标，通过添加相应的类名（如fa fa-angle-left）即可实现。这样就可以在上一页下一页盒子上显示美观的翻页图标了。

综上所述，使用CSS可以轻松实现上一页下一页盒子的功能，并通过添加字体图标来提升用户体验，为网页增加了互动性和操作性。