CSS - 水平ナビゲーション バー

重要!序文は必読です!

この章では主に CSS の水平ナビゲーション バーについて説明します。まず、ナビゲーション バーを形成するためにどのようなタグが使用されているかを知る必要があります。HTML では、ナビゲーション バーはリスト タグを使用して実装されます。つまり、順序付けされていないタグ ul> を使用して実装されます。リストの li>a 注: デフォルトで生成されるリストには項目タグが含まれているため、css のリスト削除属性 (list-style-type: none) を使用する必要があります。この属性の機能は項目タグを削除することです。同時に追加する必要があります (マージン: 0、パディング: 0) ブラウザのデフォルト設定を削除するために使用されます デフォルトではハイパーリンクに下線が付いています ハイパーリンク (a) の下線を削除する必要がある場合は、を使用してくださいテキスト装飾属性 (text-decoration: none)。水平ナビゲーション バーに注目してください。ブロック レベルの要素を表すインライン要素として設定します。つまり、(display: inline-block) 属性を使用します。この属性の機能は、要素をインライン要素として表示し、要素をブロックレベル要素として表示することです。インライン要素とは、要素を同じ行にのみ表示することを指します。ブロックレベル要素として表示されることは、要素を表示することを意味します1つのブロックとして。

水平ナビゲーション バー: ul>li>a

知らせ!水平ナビゲーション バーは、display: inline-block 属性を使用して要素をインライン要素に設定し、ブロック要素として動作することを指します。

コード図

レンダリング

ホバー水平ナビゲーション バー

知らせ!水平ナビゲーション バーをホバーするとは、ナビゲーション バー上でアンカー擬似クラス (:hover) を使用することを指します。

コード図

レンダリング

おすすめ

転載: blog.csdn.net/m0_73839298/article/details/135246142