CSS分頁

CSS 分頁實例

本章節我們將為大家介紹如何透過使用 CSS 來建立分頁的實例。

簡單分頁

如果你的網站有很多個頁面，你就需要使用分頁來為每個頁面做導覽。

以下實例示範如何使用HTML 和CSS 來建立分頁

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>简单的分页</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 選擇器來修改樣式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上。</p>
<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>

圓角樣式

可以使用 border-radius 屬性為選取的頁碼來新增圓角樣式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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;
    border-radius: 5px;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>圆角样式</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>

滑鼠懸停過渡效果

我們可以透過新增 transition 屬性來為滑鼠移到頁碼上時加入過渡效果to the page links to create a transition effect on hover:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>鼠标悬停过渡效果</h2>
<p>鼠标移动到分页码上。</p>
<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>

帶邊框分頁

我們可以使用 border 屬性來新增帶邊框分頁:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>带边框分页</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>

#分頁間隔

提示: 你可以使用 margin 屬性為每個頁碼直接新增空格：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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;
    margin: 0 4px;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>分页间隔</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>

分頁字體大小

我們可以使用 font-size 屬性來設定分頁的字體大小:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<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;
    font-size: 22px;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>分页字体大小</h2>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<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>

麵包屑導覽

另外一種導航為麵包屑導航，實例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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: "/rrreeea0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<h2>面包屑导航</h2>
<ul class="breadcrumb">
  <li><a href="#">首页 </a></li>
  <li><a href="#">前端 </a></li>
  <li><a href="#">HTML 教程 </a></li>
  <li>HTML 段落</li>
</ul>
</body>
</html>

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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>面包屑导航</h2> <ul class="breadcrumb"> <li><a href="#">首页 </a></li> <li><a href="#">前端 </a></li> <li><a href="#">HTML 教程 </a></li> <li>HTML 段落</li> </ul> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear