Ⅰ. 問題の説明: html+css を使用してシンプルなナビゲーション バーを実装します。 Ⅱ実施手順は以下のとおりです。 1. VScode ソフトウェアを実行し、個人テストで実現できます。 <!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 の使い方の詳細な説明
vue と vue-router の紹介 <script src="https://...
この記事は主にJavaScriptを使用してWeb計算機を実現する効果を記録し、参考として掲載してい...
nohup コマンド: プロセスを実行しており、アカウントからログアウトしてもプロセスが終了しないと...
1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...
目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...
必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...
最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...
最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...
設置環境WIN10 VMware Workstation Pro 15.0.0 ビルド 101344...
目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...
この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...
HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...
<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...
監視ホストの追加ホスト 192.168.179.104 が zabbix 監視項目に追加されます (...