这一节要说如何用CSS样式表来设置分页，所谓分页就是翻页。

---

一个简单的翻页

假如内容过多，一个页面放不下，因此需要放在多个网页中，这是就可以通过翻页来快速导航到达指定页面。

.pagination {
    display: inline-block;
}

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

运行一下

设置翻页中当前所在页面

将当前所在页面设置成特殊样式，以体现目前所在页面就是当前页面。对于指向其他页面的翻页页码，可以设置其被鼠标悬浮时的样式。

.pagination a.active {
    background-color: #46acb6;
    color: white;
}

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

运行一下

圆角化

为了装X，贫道决定把上面的翻页圆角化，使用CSS中的border-radius属性即可。

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

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

运行一下

给hover样式加过渡

通过transition属性给hover状态时的背景色变化添加上过渡效果。

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

运行一下

将翻页添加上边框

通过CSS中的border属性可以设置翻页元素的边框。

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

运行一下

首尾圆角化

如下所示，将首尾圆角化。

.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;
}

运行一下

设置翻页数字的间距

如下所示，通过CSS中的margin属性可设置翻页内元素外边距，从而实现数字之间的间隔。

.pagination a {
    margin: 0 4px;
}

运行一下

使用大号字体的翻页

通过设置font-size属性可设置大号字体的翻页。

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

运行一下

使翻页居中

为了使翻页居中，可在翻页外面先设置一个类似div元素这种容器，设置该div元素text-align:center即可。

.center {
    text-align: center;
}

运行一下

---

下面再延伸说一下如何创建面包选项卡，也就是一种选项卡的形式而已。本节上述所有的翻页以及下面所示的面包选项卡，都可以在Bootstrap这类第三方前端库中找到更简单的应用方法，因此本节不必强记，会意即可。

---

面包选项卡

• 首页
• 天地会
• 青木堂
• 香主简介

也就是一种导航菜单栏的形式而已，就是习惯性叫面包选项卡而已，大致看一下就好啦~

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eef8f8;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {color: #46acb6;}

运行一下