CSSを使用して応答ページネーションを作成する方法を学びます。
シンプルなページネーション
あなたはページのたくさんのウェブサイトを持っている場合は、各ページにページネーションのいくつかの並べ替えを追加することがあります。
ページネーションを作成するには、HTMLリストのスタイル：
例
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;
} »それを自分で試してみてください アクティブおよびHoverableページネーション
で現在のページをハイライト表示.activeクラス、および使用:hover 、それらの上にマウスを移動するときに、各ページのリンクの色を変更するには、セレクタを：
例
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} »それを自分で試してみてください 丸みを帯びたアクティブおよびHoverableボタン
追加border-radiusあなたは丸め「アクティブ」と「ホバー」ボタンをしたい場合は、プロパティを：
例
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} »それを自分で試してみてください Hoverableトランジションエフェクト
追加transitionホバー上のトランジションエフェクトを作成するには、ページのリンクにプロパティを：
フチページネーション
使用borderページネーションに境界線を追加するには、プロパティを：
丸みを帯びたボーダー
ヒント：ページネーションであなたの最初と最後のリンクに丸い枠線を追加します。
例
.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;
}
»それを自分で試してみてください リンク間のスペース
ヒント：追加marginページ・リンクグループにしたくない場合は、プロパティを：
例
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
»それを自分で試してみてください ページネーションサイズ
でページネーションのサイズを変更font-sizeプロパティ：
中心のページネーション
、ページネーションを中央（のようにその周囲にコンテナ要素をラップする<div>および追加text-align:center
その他の例
パン粉
ページネーションの別のバリエーションは、いわゆる「ブレッドクラム」です。
例
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";
}
»それを自分で試してみてください