HTML と CSS を使用してレスポンシブな画像ナビゲーションレイアウトを作成する方法-htmlチュートリアル-php.cn

HTML と CSS を使用してレスポンシブな画像ナビゲーションレイアウトを作成する方法

WBOY

リリース： 2023-10-20 09:55:52

オリジナル

1384 人が閲覧しました

HTML と CSS を使用してレスポンシブな画像ナビゲーションレイアウトを作成する方法

HTML と CSS を使用してレスポンシブなイメージナビゲーションレイアウトを作成する方法

HTML と CSS は、Web ページレイアウトを作成するための重要なツールです。 HTML 構造タグと CSS スタイルルールを使用することで、さまざまなページレイアウトを作成できます。この記事では、HTML と CSS を使用してレスポンシブな画像ナビゲーションレイアウトを作成する方法を学びます。

まず、HTML コードを記述します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式图片导航布局</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="#"><img src="home.png" alt="Home"></a></li>
      <li><a href="#"><img src="about.png" alt="About"></a></li>
      <li><a href="#"><img src="services.png" alt="Services"></a></li>
      <li><a href="#"><img src="contact.png" alt="Contact"></a></li>
    </ul>
  </nav>
</body>

</html>

ログイン後にコピー

上記のコードでは、ナビゲーションバーを作成します。ナビゲーションバーには順序なしリストが含まれており、各リスト項目には画像とリンクを含むアンカー要素が含まれています。 src 属性に適切な画像パスを必ず入力してください。

次に、ナビゲーションバーにスタイルを追加する CSS コードを記述します。

nav {
  background-color: #333;
  text-align: center;
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a img {
  width: 30px;
  height: 30px;
}

@media (max-width: 600px) {
  nav ul li {
    display: block;
    margin: 10px 0;
  }
}

ログイン後にコピー

上記の CSS コードでは、ナビゲーションバーとリスト項目の基本スタイルをいくつか設定しています。また、メディアクエリを使用して、画面幅が 600 ピクセル未満の場合にリスト項目がブロックレベルの要素として表示されるように設定します。

最後に、style.css という外部スタイルシートを作成し、HTML ファイルに接続する必要があります。

これで、ブラウザで HTML ファイルを開いて、応答性の高い画像ナビゲーションレイアウトを表示できるようになります。画面幅が 600 ピクセルより大きい場合、以下に示すようにナビゲーションバーが水平に表示されます。

[ホーム] [概要] [サービス] [連絡先]

画面幅がそれより小さい場合600 ピクセルより大きい場合、ナビゲーションバーは次のように垂直に表示されます:

[ホーム]
[概要]
[サービス]
[連絡先]

HTML と CSS を使用するでは、シンプルなレスポンシブ画像ナビゲーションレイアウトを作成します。ニーズに合わせてスタイルをさらにカスタマイズし、機能を追加することができます。

以上がHTML と CSS を使用してレスポンシブな画像ナビゲーションレイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。