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