) を含めることができます。 以下は基本的な HTML 構造の例です:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>ログイン後にコピー
- CSS スタイル
次に、CSS を使用してスタイルを追加する必要があります。ナビゲーション バー、レスポンシブなレイアウトに見えるようにします。まず、ナビゲーション バーに特定の背景色、パディング、境界線を追加する必要があります。次に、CSS のフローティング レイアウトまたはエラスティック レイアウトを使用して、ナビゲーション バー内のメニュー オプションの位置を自動的に調整できます。
以下は基本的な CSS スタイルの例です:
nav {
background-color: #333;
padding: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 15px;
}
a {
color: #fff;
text-decoration: none;
}ログイン後にコピー
- レスポンシブ レイアウト
さまざまなデバイスでナビゲーション バーの適応性を実現するには、さまざまな CSS スタイルを設定するには、メディア クエリが必要です。たとえば、小さい画面では、メニュー オプションを垂直に配置し、表示時に自動的に非表示にしたり折りたたんだりするように設定できます。
以下は基本的なレスポンシブ レイアウトの例です:
@media screen and (max-width: 600px) {
ul {
display: none;
}
li {
display: block;
margin-bottom: 10px;
}
nav {
background-color: #333;
padding: 10px;
height: 50px;
}
/* 在较小屏幕上显示一个菜单图标，并在点击时显示/隐藏菜单选项 */
.menu-icon {
display: inline-block;
color: #fff;
float: right;
margin-top: 15px;
margin-right: 15px;
cursor: pointer;
}
/* 响应式菜单隐藏时，点击菜单图标显示菜单选项 */
#menu-toggle:checked ~ ul {
display: block;
}
}ログイン後にコピー
CSS でメディア クエリ (@media) を使用してレスポンシブ レイアウトを設定していることに注意してください。さまざまな画面サイズ条件と対応する CSS スタイルを設定することで、さまざまなデバイスでナビゲーション バーの適応型レイアウトを実装できます。
まとめると、HTML と CSS を使用することで、レスポンシブなナビゲーション フレーム レイアウトを実現できます。 HTML は基本的なナビゲーション バー構造の作成に使用され、CSS はナビゲーション バーのスタイルとレイアウトに使用されます。メディア クエリを使用すると、ナビゲーション バーをさまざまなデバイスに適応させることができます。この記事があなたのお役に立ち、レスポンシブな美しいナビゲーション フレーム レイアウトを正常に実装できることを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
