ホームページ > 記事 > ウェブフロントエンド > HTML と CSS を使用してレスポンシブな画像ナビゲーション レイアウトを作成する方法
HTML と CSS を使用してレスポンシブな画像ナビゲーション レイアウトを作成する方法
- WBOYオリジナル
- 2023-10-20 09:55:521379ブラウズ
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 サイトの他の関連記事を参照してください。