CSSのページネーション
CSS ページネーションのサンプル
この章では、CSS を使用してページネーションのサンプルを作成する方法を紹介します。
シンプルなページネーション
Web サイトに多くのページがある場合は、ページネーションを使用して各ページを移動する必要があります。
次の例は、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>クリックしてマウスオーバーするページネーション スタイル
現(xiàn)在のページをクリックすると、.active を使用して現(xiàn)在のページ スタイルを設(shè)定でき、マウスオーバーすると、 :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>點(diǎn)擊及鼠標(biāo)懸停分頁樣式</h2>
<p>移動鼠標(biāo)的分頁的數(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>角丸スタイル
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 屬性を追加します。 ページ リンクにトランジション効果を追加して、ホバー時(shí)のトランジション効果を作成します。
<!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)懸停過渡效果</h2>
<p>鼠標(biāo)移動到分頁碼上。</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>ページング間隔
ヒント: 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;
}
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 屬性を使用してページネーションのフォントサイズを設(shè)定できます:
<!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>パンくずナビゲーション
別の種類のナビゲーションは、パンくずナビゲーションです。例は次のとおりです。
