CSS分頁是一種在網(wǎng)頁中創(chuàng)建導航鏈接的方法，主要用于將大量的信息內(nèi)容分散到多個頁面中，以便于用戶瀏覽。這種技術(shù)主要通過HTML和CSS實現(xiàn)。例如以使用HTML創(chuàng)建一個包含多個頁面鏈接的列表，然后使用CSS來設置這些鏈接的樣式，如顏色、大小、邊框等。還可以為鏈接添加一些動態(tài)效果，例如鼠標懸停過渡效果。

一、基本分頁

例如一個網(wǎng)站擁有很多個頁面，為了便于用戶翻閱和管理員管理，這時就需要使用分頁來為每個頁面做導航。以下代碼演示了使用 HTML 和 CSS 來創(chuàng)建分頁：

ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

二、點擊及鼠標懸停

使用 .active 屬性可以來設置當前頁樣式，鼠標懸?？梢允褂?:hover 選擇器來修改樣式：

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}

結(jié)果為：

三、圓角樣式

border-radius 屬性可以為選中的頁碼來添加圓角樣式：

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

結(jié)果為：

四、鼠標懸停過渡效果

transition 屬性可以為鼠標移動到頁碼上時添加過渡效果：

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

五、帶邊框分頁

border 屬性可以用來設置帶邊框分頁：

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

結(jié)果為：

在第一個分頁鏈接和最后一個分頁鏈接添加圓角：

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

結(jié)果為：

使用 margin 屬性來為每個頁碼直接添加空格：

ul.pagination li a {
margin: 0 4px; /* 0 對應的是頭部與底部，可以修改它看看效果 */
}

結(jié)果為：

六、分頁字體大小

font-size 屬性可以用來設置分頁的字體大?。?/p>

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

結(jié)果為：

七、居中分頁

text-align:center 樣式可以讓分頁居中：

div.center {
text-align: center;
}

結(jié)果為：

八、面包屑導航

實例如下：

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: "/\00a0";
}

結(jié)果為：