生活中分頁的效果到處可見，今天教大家詳細的分析一下分頁效果。
如何使用 HTML 和 CSS 來建立分頁?
如果你的網站有很多個頁面，你就需要使用分頁來為每個頁面做導航
一、分頁類型
1. 簡單分頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
<style>
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;
}
</style>
</head>
<body>
<h2>Simple Pagination</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html> 點選及滑鼠懸停分頁樣式
如果點選目前頁，可以使用 .active 來設定當期頁樣式，滑鼠懸停可以使用 :hover 選擇器來修改樣式：
CSS 執行個體
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;} 2. 分頁樣式
2.1 圓角樣式分頁
可以使用 border-radius 屬性為選中的頁碼來添加圓角樣式:
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} 滑鼠懸停過渡效果
我們可以通過添加 transition 屬性來為滑鼠移動到頁碼上時添加過渡效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
<style>
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;
transition: background-color .3s;
border: 1px solid #ddd;
}
.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;
}
ul.pagination li a.active {
background-color: #f00;
color: white;
border: 1px solid #f00;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Pagination with Rounded Borders</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html> 2.2 帶邊框分頁
我們可以使用 border 屬性來添加帶邊框分頁:
ul.pagination li a {
border: 1px solid #ddd; /* Gray */
} 2.3. 分頁間隔
提示: 你可以使用 margin 屬性來為每個頁碼直接添加空格：
ul.pagination li a {
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
} 2.4 分頁字型大小
我們可以使用 font-size 屬性來設定分頁的字型大小:
ul.pagination li a {
font-size: 22px;
} 2.5 居中分頁
如果要讓分頁居中，可以在容器元素上 (如
<div>
) 添加
text-align:center
樣式：
div.center {
text-align: center;
} 二、案例
面包屑導航
另外一種導航為面包屑導航，
執行個體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
<style>
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";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
</body>
</html> 三、總結
本文以生活中的現象為切入點，主要介紹了Html的分頁效果中樣式的使用，滑鼠懸停時分頁效果的應用。
用豐富的案例幫助大家更好的去了解對象，最後以“面包屑導航 ”作為小項目，使用Html程式設計語言，對前面介紹效果做一個總體的整合，友善大家增加對類和對象的認識，希望對大家的學習有幫助。
想學習更多Python網絡爬蟲與資料挖掘知識，可前往專業網站：
http://pdcfighting.com/![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)