HTMLの水平ナビゲーションを行う方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLの水平ナビゲーションを行う方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Nov 10, 2021 am 10:34 AM

css html

HTML 水平ナビゲーションを行う方法: 1. ul タグ内の li タグを使用してナビゲーションメニュー (垂直) を構築します; 2. li タグに「list-style:none」スタイルを追加して、ナビゲーションメニューの前の小さな黒い部分をクリックします。 3. li タグに「float: left;」スタイルを追加して、ナビゲーションバーを水平に配置します。

HTMLの水平ナビゲーションを行う方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

アイデア:

タグを作成し、最後に
タグをフロートに設定します。
HTML 水平ナビゲーションの実行方法:

1. 新しい HTML ページを作成し、HTML 編集ソフトウェアを開き、新しい HTML を作成します。ページ。図に示すように:

##2. ナビゲーションタグを追加し、タグ内に新しい
タグを作成してから、
- タグをタグに追加します。図に示すように:
  
  3.
- タグ内にテキストを追加します。新しい
- に表示する内容を追加します。図に示すように:
  
  4. スタイルタグを作成し、その後に新しいを作成します。タグ。ラベル。 <p></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/918/441/651/1636507772238439.png" class="lazy" title="1636507772238439.png" alt="HTMLの水平ナビゲーションを行う方法"></p>5. 水平ナビゲーションスタイルを作成し、<style> タグにスタイルクラス: .nav li{} を追加して、それを .nav li に設定します。 class スタイルの背景色は赤、フロートは左フロート、内枠は上から下まで 8 ピクセル、左から右まで 15 ピクセル、リスト属性はなし、フォントの色は白です。 <p>スタイルコード: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }</pre><div class="contentsignin">ログイン後にコピー</div></div></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/514/178/871/1636507796753077.png" class="lazy" title="1636507796753077.png" alt="HTMLの水平ナビゲーションを行う方法"/></p>6. 参照スタイルクラス。 <ul> タグに class="nav" を追加して、nav の下の <li> タグが設定されたスタイルクラスを参照できるようにします。図に示すように: <p></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/157/949/421/1636507843494356.png" class="lazy" title="1636507843494356.png" alt="HTMLの水平ナビゲーションを行う方法"/></p>7. 効果を確認します。 HTML ファイルを保存した後、ブラウザで開くと、水平ナビゲーションメニューの効果が表示されます。図に示すように: <p></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/741/472/608/1636507853324262.png" class="lazy" title="1636507853324262.png" alt="HTMLの水平ナビゲーションを行う方法"/></p>すべてのコード: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向导航菜单</title> <style type="text/css"> .nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; } </style> </head> <body> <ul class="nav"> <li>首页</li> <li>新闻</li> <li>公司产品</li> <li>关于我们</li> <li>公司介绍</li> </ul> </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div>プログラミング関連の知識の詳細については、<p>プログラミングビデオ<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">をご覧ください。！ </style>

以上がHTMLの水平ナビゲーションを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7751

Java チュートリアル

1643

CakePHP チュートリアル

1398

Laravel チュートリアル

1293

PHP チュートリアル

1234

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。