Pagination CSS
Exemple de pagination CSS
Dans ce chapitre, nous présenterons comment créer des exemples de pagination en utilisant CSS.
Paging simple
Si votre site Web comporte de nombreuses pages, vous devez utiliser la pagination pour naviguer dans chaque page.
L'exemple suivant montre comment utiliser HTML et CSS pour créer une pagination
<!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>簡(jiǎn)單的分頁(yè)</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>Styles de pagination par clic et survol de la souris
Si vous cliquez sur la page actuelle, vous pouvez utiliser .active pour définir le style de page de la période actuelle, vous pouvez utiliser le sélecteur :hover pour modifier le style lorsque la souris survole?:
<!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>點(diǎn)擊及鼠標(biāo)懸停分頁(yè)樣式</h2>
<p>移動(dòng)鼠標(biāo)的分頁(yè)的數(shù)字上。</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>Style de coin arrondi
Vous pouvez utiliser l'attribut border-radius pour ajoutez un style de coin arrondi au numéro de page sélectionné?:
<!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>Effet de transition au survol de la souris
Nous pouvons ajouter un effet de transition aux liens de la page pour créer un effet de transition au survol?:
<!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>鼠標(biāo)懸停過(guò)渡效果</h2>
<p>鼠標(biāo)移動(dòng)到分頁(yè)碼上。</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> < en ajoutant l'attribut de transition. ??>Pagination bordée
Nous pouvons utiliser l'attribut border pour ajouter une pagination bordée?:<!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>帶邊框分頁(yè)</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>Intervalle de page
Astuce?: Vous pouvez utiliser l'attribut margin pour ajouter des espaces directement à chaque numéro de page?:<!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>分頁(yè)間隔</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>Taille de la police de la page
Nous pouvons utiliser l'attribut font-size pour définir la taille de la police de la page?:
<!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>分頁(yè)字體大小</h2>
<p>我們可以使用 font-size 屬性來(lái)設(shè)置分頁(yè)的字體大小:</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>Fil d'Ariane
Un autre type de navigation est la navigation par fil d'Ariane. Un exemple est le suivant?:
<!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>面包屑導(dǎo)航</h2>
<ul class="breadcrumb">
<li><a href="#">首頁(yè) </a></li>
<li><a href="#">前端 </a></li>
<li><a href="#">HTML 教程 </a></li>
<li>HTML 段落</li>
</ul>
</body>
</html>
![Cours de base sur l'exploitation et la maintenance de Linux [explication détaillée de l'ensemble du processus]](https://img.php.cn/upload/course/000/000/068/63ff173c79edd672.jpg)
