​x
 
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}
​
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}
​
.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}
​
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
​
<p>前进后退按钮：</p>
<div class="pagination">
  <a href="#">❮</a>
  <a href="#">❯</a>
</div>
​
<p>导航分页：</p>
<div class="pagination">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
​
</body>
</html>
​