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

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 の使い方の詳細な説明

推薦する

HTML で vue-router を使用するサンプル コード

vue と vue-router の紹介 <script src="https://...

JavaScript を使用した Web 計算機の作成

この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載してい...

nohup /dev/null 2>&1 の使い方の詳しい説明

nohup コマンド: プロセスを実行しており、アカウントからログアウトしてもプロセスが終了しないと...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...

CSS 使用のヒントのまとめ

最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...

JS 正規マッチングの落とし穴の記録

最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...

jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...

Vue+Elementでページング効果を実現

この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...

Zabbixで監視する必要があるホストを追加するための詳細な手順

監視ホストの追加ホスト 192.168.179.104 が zabbix 監視項目に追加されます (...