HTMLとCSSを使用して水平メニューレイアウトを実装する方法-htmlチュートリアル-php.cn

HTMLとCSSを使用して水平メニューレイアウトを実装する方法

HTML と CSS を使用して水平メニューレイアウトを実装する方法

はじめに:
Web デザインでは、メニューレイアウトは非常に一般的なレイアウト方法です。水平メニューレイアウトは古典的で一般的に使用されるレイアウト方法です。この記事では、HTML と CSS を使用して水平メニューレイアウトを実装する方法と、具体的なコード例を紹介します。

1. HTML 構造の設計

水平メニューレイアウトを実装する前に、適切な HTML 構造を構築する必要があります。以下は、基本的な HTML 構造の例です。

  菜单项 1
 菜单项 2
 菜单项 3
 菜单项 4

ログイン後にコピー

2. CSS スタイルの設計

まず、メニューコンテナのスタイルを設定し、幅と中央揃えを定義します。

.menu { width: 100%; text-align: center; }

ログイン後にコピー

.menu ul { display: inline-block; list-style-type: none; margin: 0; padding: 0; } .menu ul li { display: inline-block; margin: 0 10px; } .menu ul li a { text-decoration: none; color: #333; font-size: 16px; }

ログイン後にコピー

.menu ul li a:hover { color: #ff0000; }

ログイン後にコピー

3. 完成したサンプルコード

   水平菜单布局示例  
    菜单项 1
 菜单项 2
 菜单项 3
 菜单项 4

ログイン後にコピー

4. 効果の表示

上記のコードをサフィックス名を付けて保存します。 .html ファイルをブラウザで開くと、実装された水平メニューレイアウトが表示されます。マウスをメニュー項目の上に置くと、テキストの色が赤に変わり、シンプルなインタラクティブな効果が得られます。

結論:

この記事では、HTML と CSS を使用してシンプルな水平メニューレイアウトを実装する方法を紹介します。適切な HTML 構造を定義し、対応する CSS スタイルを設定することで、美しく使いやすいインターフェイスレイアウトを簡単に実現できます。この記事があなたのお役に立てば幸いです、読んでいただきありがとうございます!

以上がHTMLとCSSを使用して水平メニューレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。