2021.6.10

今日学习进度：CSS分页

	第一天	第二天	第三天	第四天	第五天
所花时间（小时）	3	4.5	3	4.5
代码量（行）	100	120	85	100
博客量（篇）	1	1	1	1
了解到的知识点	CSS圆角	CSS边框图像	CSS按钮	CSS分页

简单的分页

如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：

• «
• 1
• 2
• 3
• 4
• 5
• 6
• »

• ❮  
•   ❯

实例

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

活动的可悬停分页

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色：

实例

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

圆角的活动可悬停分页

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

如果您需要圆角的 "active" 和 "hover" 按钮，请添加 border-radius 属性：

实例

.pagination a {
  border-radius: 5px;
}

.pagination a.active {
  border-radius: 5px;
}

可悬停的过渡效果

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

请将 transition 属性添加到页面链接，创建鼠标悬停时的过渡效果：

实例

.pagination a {
  transition: background-color .3s;
}

带边框的分页

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

请使用 border 属性为分页添加边框：

实例

.pagination a {
  border: 1px solid #ddd; /* Gray */
}

圆角边框

提示：在分页的第一个和最后一个链接中添加圆角边框：

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

实例

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

链接之间的空间

提示：如果不想组合页面链接，请添加 margin 属性：

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

实例

.pagination a {
  margin: 0 4px; /* 上下外边距为 0，可灵活修改 */
}

分页尺寸

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

请使用 font-size 属性更改分页的大小：

实例

.pagination a {
  font-size: 22px;
}

居中的分页

• «
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• »

如需居中分页，请使用设置了 text-align:center 的容器元素（如 <div>）包围它：

实例

.center {
  text-align: center;
}

面包屑

• Home
 
• Pictures
 
• Summer 15
 
• Italy

分页的另一种形式是所谓的“面包屑”（breadcrumbs）：

实例

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/0a0";
}