Html+Css を使用して、シンプルなナビゲーションバー機能を実装します (マウスに遭遇するとナビゲーションバーの背景色が切り替わります)

Ⅰ. 問題の説明:

html+css を使用してシンプルなナビゲーションバーを実装します。
**要件: **ナビゲーションバーを 8 つの小さな部分に分割し、マウスをその上に置いてクリックしない場合は、ナビゲーションバーの背景色が黄緑色で表示されます。

Ⅱ実施手順は以下のとおりです。

1. VScode ソフトウェアを実行し、個人テストで実現できます。
2. コードを実行します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル タイプ="text/css">
        * {
            マージン: 0;
            パディング: 0;
        }
        /* 
        上記のステートメントは、システムがデフォルト値を使用しないように、div ボックスの外側と内側の余白をクリアすることを意味します。
        このステートメントの有無は結果にあまり影響しません。
         */
        ul {
            リストスタイル: なし;
        }
        /* 
        上記のステートメントは、ul リストのデフォルトのスタイルをキャンセルすることを意味します。
        このステートメントがないと、結果のナビゲーション バーに小さな黒い点が表示される可能性が高くなります。
         */
        。箱 {
            幅: 960ピクセル;
            高さ: 40px;
            マージン: 100px 自動;
        }
        /* 
        上記のステートメントは、div ボックスの幅を 960 ピクセルに定義することを意味します。
        高さは40pxです。
        100 ピクセルの余白で画面の中央に配置されます。
         */
        .box ul {
            オーバーフロー: 非表示;
        }
        /* 
        上記のステートメントは、div ボックスの下の ul ボックスに hidden 属性を設定することを意味します。
        hidden 属性は、子ボックスの可能なフロートをクリアして、ナビゲーション バーを必要に応じて 8 つの部分に設定できるようにするために使用されます。
         */
        .box ul li {
            幅: 120ピクセル;
            高さ: 40px;
            フロート: 左;
            フォントサイズ: 18px;
            テキスト配置: 中央;
            フォントファミリ: "Microsoft Yahei";
            行の高さ: 40px;
        }
        /* 
        上記のステートメントは、div ボックスの ul ボックスの子ボックス li の属性値を設定することを意味します。
        幅は120ピクセルです。
        高さは40pxです。
        浮動値は左に浮動します。
        サブサイズは18pxです。
        テキストの配置は中央揃えです。
        テキストタイプは「Microsoft YaHei」です
        行の高さは40pxです。
         */
        .box ul li a {
            表示: ブロック;
            背景色: #ccc;
            色: #666;
            テキスト装飾: なし;
        }
        /* 
        上記のステートメントは、div ボックスの ul ボックスの子ボックス li の属性値を設定することを意味します。
        " display: block;": インライン要素をブロックレベル要素に変換します。
        背景色を「#ccc」に設定します。
        フォントの色は「#666」です。
        テキスト装飾はありません。
         */
        .box ul li a:hover {
            背景色: 黄緑;
            色: #fff;
            フォントの太さ: 太字;
        }
        /* 
        上記のステートメントは、div ボックスの ul ボックスの子ボックス li の属性値を設定することを意味します。(マウスがナビゲーション バーに置かれたときに背景色が変更される値を設定します)
        変更後の背景色は「yellowgreen」[黄緑]になります。
        変更されたフォントの色は「#fff」[白]です。
        変更後のフォントの太さは「太字」[bold]になります。
         */
    </スタイル>
</head>
<本文>
    <div class="box">
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ホーム</a></li>
        </ul>
    </div>
</本文>
</html>

3. 結果の表示:
マウスを離す前に:

ここに画像の説明を挿入

マウスをナビゲーションバーの最初の「ホーム」の後に置くと、次のようになります。

ここに画像の説明を挿入

これで、HTML+CSS を使用してシンプルなナビゲーションバー機能を実装する (マウスに遭遇するとナビゲーションバーの背景色が切り替わる) 方法についての記事は終わりです。HTML ナビゲーションバーに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: LinuxサーバーでRabbitMQ管理ページにアクセスできない問題を解決

>>: JSON.parse と JSON.stringify の使い方の詳細な説明