CSSで水平ナビゲーションバーを作成する方法

CSS を使用して水平ナビゲーション バーを作成する手順は次のとおりです: HTML ナビゲーション構造を作成します。 CSS スタイルを適用します: 表示: コンテンツ: 中央; スタイル リスト: 表示: スタイル タイプ: 0; margin-right: 1em; スタイルリンク: text-decoration: none; color: black; マウスオーバー状態: a:hov

水平ナビゲーションバーを作成する方法は、ほとんどの Web サイトのデザインに共通の要件です。 CSS を使用すると、次の手順で簡単に実現できます:

HTML 構造の作成:

<code class="html"><nav>
  <ul>
    <li><a href="home.html">主页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav></code>

CSS スタイルの適用:

1. レイアウト コンテナ:

<code class="css">nav {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

display: flex ナビゲーション バーを水平方向に配置されたコンテナーにできるようにします。

justify-content: center は、コンテンツを水平方向に中央揃えにします。

• align-items: center は、コンテンツを垂直方向に中央揃えにします。 display: flex 允许导航栏成为一个水平排列的容器。
• justify-content: center 将其内容水平居中。
• align-items: center 将其内容垂直居中。

2. 样式列表：

<code class="css">ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}</code>

• display: flex 也将列表转换为水平容器。
• list-style-type: none 去除项目符号。
• margin: 0 和 padding: 0 去除默认间距和填充。

3. 样式列表项：

<code class="css">li {
  margin-right: 1em;
}</code>

• margin-right: 1em 在每个列表项之间添加一些间距。

4. 样式链接：

<code class="css">a {
  text-decoration: none;
  color: black;
}</code>

• text-decoration: none 去除链接下划线。
• color: black 设置链接文本为黑色。

5. 鼠标悬停状态：

<code class="css">a:hover {
  color: blue;
}</code>

• a:hover

2. スタイルリスト: rrreee

display: flex もリストを水平コンテナに変換します。

🎜list-style-type: none 箇条書きを削除します。 🎜🎜margin: 0 と padding: 0 は、デフォルトのスペースとパディングを削除します。 🎜🎜🎜🎜3. リスト項目のスタイル: 🎜🎜rrreee🎜🎜margin-right: 1em 各リスト項目の間にスペースを追加します。 🎜🎜🎜🎜4. スタイルリンク: 🎜🎜rrreee🎜🎜text-decoration: none リンクの下線を削除します。 🎜🎜color: black リンク テキストを黒に設定します。 🎜🎜🎜🎜5. マウスオーバー状態: 🎜🎜rrreee🎜🎜a:hover マウスがリンク上にあるときのテキストの色を青に設定します。 🎜🎜🎜🎜結果: 🎜🎜🎜これらの手順に従うと、項目が画面の中央に互いに水平に配置された水平ナビゲーション バーが作成されます。マウスをリンク上に置くと、リンク テキストが青色に変わります。 🎜

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