CSSタブの例
この章では、我々は、CSSを使用することにより、ページングのインスタンスを作成する方法を紹介します。
シンプルなタブ
あなたのサイトが多くのページを持っている場合は、各ページのナビゲーションを作るためにタブを使用する必要があります。
次の例では、ページを作成するHTMLとCSSを使用する方法を示します。
CSSの例
ul.pagination {
表示：インラインブロック;
パディング：0;
マージン：0;
}
ul.pagination李 {表示：インライン;}
ul.paginationリーA {
色：黒;
フロート：左;
パディング：8px 16pxに;
テキスト装飾：なし;
}
表示：インラインブロック;
パディング：0;
マージン：0;
}
ul.pagination李 {表示：インライン;}
ul.paginationリーA {
色：黒;
フロート：左;
パディング：8px 16pxに;
テキスト装飾：なし;
}
»をお試しください
タブとホバースタイルをクリックします
このページでクリックした場合は、使用することができます.active現在のページスタイルを設定するには、マウスオーバーを使用することができます:hoverセレクタをスタイルを変更するには：
CSSの例
ul.paginationリーa.active {
背景色：＃4CAF50。
色：白;
}
ul.pagination李：ホバー：ない（ .active）{背景色：#ddd;}
背景色：＃4CAF50。
色：白;
}
ul.pagination李：ホバー：ない（ .active）{背景色：#ddd;}
»をお試しください
CSSの例
ul.paginationリーa.active {
背景色：＃4CAF50。
色：白;
}
ul.pagination李：ホバー：ない（.active）{背景色：#ddd;}
背景色：＃4CAF50。
色：白;
}
ul.pagination李：ホバー：ない（.active）{背景色：#ddd;}
»をお試しください
丸みを帯びたスタイル
あなたが使用することができますborder-radius丸い角のスタイルを追加するために選択したページのプロパティを：
ホバートランジション効果
我々は、追加することができtransitionトランジションエフェクトを追加するときに、ページ上でマウスを移動するには、プロパティを：
ボーダータブ付き
我々は、使用することができますborder境界線でページを追加するには、属性を：
角丸
ヒント：最初と最後のページでページネーションリンクは、フィレットを追加リンク：
CSSの例
.pagination李：最初の子{
border-top-左半径：5pxの;
border-bottom-左半径：5pxの;
}
.pagination李：最後の子のA {
border-top-右半径：5pxの;
border-bottom-右半径：5pxの;
}
border-top-左半径：5pxの;
border-bottom-左半径：5pxの;
}
.pagination李：最後の子のA {
border-top-右半径：5pxの;
border-bottom-右半径：5pxの;
}
»をお試しください
ページング間隔
ヒント：あなたが使用できるmargin各ページに直接スペースを追加するには、プロパティを：
ページングフォントサイズ
我々は、使用することができfont-sizeページのフォントサイズを設定するには、プロパティを：
センター]タブ
あなたは、タブを中央にしたい場合は、（そのような<div>のように）コンテナ要素にテキストが揃えに追加することができます：中央のスタイルを：
より多くの例
パン粉
次のようにパンくずのような別のナビゲーション、例を示します。
CSSの例
ul.breadcrumb {
パディング：8px 16pxに;
リストスタイル：なし。
背景色：#eee;
}
ul.breadcrumb李{表示：インライン;}
ul.breadcrumbのli + liを：{の前に
パディング：8px;
色：黒;
内容：「/ \ 00A0 ";
}
パディング：8px 16pxに;
リストスタイル：なし。
背景色：#eee;
}
ul.breadcrumb李{表示：インライン;}
ul.breadcrumbのli + liを：{の前に
パディング：8px;
色：黒;
内容：「/ \ 00A0 ";
}
»をお試しください