CSS3 はナビゲーション bar_html/css_WEB-ITnose を実装します

ナビゲーション バーは Web でよく使用される UI コンポーネントであり、基本的に Bootstrap などの CSS フレームワークで提供されます。 ナビゲーション バーは非常に重要なので、ナビゲーション バーを手動で実装しましょう。 このプロセスでも、いくつかのレイアウト スキルと CSS3 機能を習得する必要があります。

リスト スタイル

ナビゲーション バーは通常

でマークされています:

<ul>  <li><a>First Item</a></li>  <li><a>Second Item</a></li>  <li class="active"><a>Third Item</a></li>  <li><a>Fourth Item</a></li></ul>

ログイン後にコピー

まず、ターゲット マーク (小さな点) や左側のマージンなどのリストのデフォルト スタイルを削除します:

ul {  left-margin: 0;         /* IE/Opera 默认使用外边距 */  left-padding: 0;        /* Safari/Firefox 默认使用内边距 */  list-style-type: none;  /* 左侧向目标记 */}

ログイン後にコピー

これにより、ブラウザによって

に設定されたデフォルトのスタイルが削除されます。 左側の項目マークのカスタマイズ方法については、「CSS背景画像Tips」の記事を参考にしてください。
には非常に多くのデフォルト スタイルがあるため、ナビゲーションに
を使用しないのはなぜでしょうか。 これは、HTML セマンティック タグの精神に反します。HTML セマンティック タグには、できる限り多くのセマンティックが含まれ、検索エンジンやスクリーン リーダーにとって使いやすいものでなければならず、スタイル情報は CSS ファイルに抽出される必要があります。

垂直ナビゲーション バー

垂直ナビゲーション バーの効果は以下のようになります。強調表示された (暗い) 項目は現在アクティブな項目を表し、マウス ホバーまたは現在のページを示します。

上の図は前述の HTML フラグメントを使用しています。以下では主に CSS の実装を考慮しています。 前述のようにリストのデフォルトのスタイルをクリアした後、リスト項目のスタイルを設定します。

ul a{  display: block;  width: 200px;  height: 40px;  line-height: 40px;  background: #f8f8f8;}

ログイン後にコピー

まず、 をブロックレベルの要素として設定して幅と高さを設定し、次に行の高さを設定します。テキストを中央揃えにするために、高さと高さを同じにする必要があります。 最後に、ナビゲーション バーを強調表示する背景を設定します。

IE は

の上下に余分な空白を追加することに注意してください。これを解決するには、

を display: inline; に設定できます。

境界線と丸い角

次に、いくつかの境界線と丸い角を設定します。

ul a{  border-radius: 3px;  border: 1px solid #e7e7e7;  padding: 0 15px;}

ログイン後にコピー

境界線を少し暗い色に設定し、3 ピクセルの丸い角を追加します。テキストに境界線から一定の距離を与えるようにパディングを設定します。 border-radius は CSS3 の機能です。以前は、丸い角を設定するには背景画像の助けが必要でした。CSS 背景画像のヒントを参照してください。

境界線を設定すると、隣接するアイテムの上下の境界線が結合されて 2 ピクセルの境界線が形成されることに注意してください。 これは、負のマージンを設定する (項目を 1 ピクセルずつオーバーラップさせる) ことで解決できますが、これには最後の項目のマージンを 0 に戻す必要があります。

ul a{  margin-bottom: -1px;}ul li:last-child a{  margin-bottom: 0;}

ログイン後にコピー

現在の項目を強調表示します

おそらく注意深い読者なら、前述の HTML フラグメントの 1 つの項目

がアクティブな CSS クラスを設定していることに気づいたかもしれません。 現在ハイライトされている項目を示すために使用されます。次のスタイルが必要です:

ul .active a, ul a:hover{  background: #e7e7e7;}

ログイン後にコピー

水平ナビゲーション バー

水平ナビゲーションを実装するには、さまざまな方法があります。

を inline-block に設定して水平方向に配置することも、float:left を設定して

を水平方向にフロートさせることもできます。後者を紹介して、最初に図を見てみましょう:

を水平方向にフローティングに設定すると、親コンテナ

の高さはゼロになり、その背景設定は無効になります。 「レイアウトでのフロートの使用とフロートのクリア」の記事では、2 つの解決策が記載されています。1 つは追加の要素を追加してフロートをクリアすることで、もう 1 つは親コンテナもフロートにすることです。参照:

ul li{  float: left;}ul{  float: left;}

ログイン後にコピー

垂直方向のナビゲーションと同様に、境界線は水平方向に積み重ねられます。解決策は同様です:

ul a{  margin-right: -1px;}ul li:last-child a{  margin-right: 0;}

ログイン後にコピー

上の図では、次のスタイルが に追加されています: width: 70px; text-align: center;