HTML と CSS を使用してナビゲーションタグレイアウトを実装する方法-htmlチュートリアル-php.cn

HTML と CSS を使用してナビゲーションタグレイアウトを実装する方法

WBOY

リリース： 2023-10-16 08:19:54

オリジナル

993 人が閲覧しました

HTML と CSS を使用してナビゲーションタグレイアウトを実装する方法

HTML と CSS を使用してナビゲーションラベルレイアウトを実装する方法

ナビゲーションラベルレイアウトは Web デザインで非常に一般的で、ユーザーは必要なページをすばやく見つけることができます。、Web サイトのナビゲーションの使いやすさを向上させます。以下では、HTML と CSS を使用してナビゲーションラベルレイアウトを実装する方法を詳しく紹介し、具体的なコード例を添付します。

HTML 構造の記述
まず、ナビゲーションタグの HTML 構造を定義する必要があります。順序なしリスト (ul) とリスト項目 (li) を使用して、ナビゲーションタグのリストレイアウトを実装できます。サンプルコードは次のとおりです。

<div class="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

ログイン後にコピー

CSS スタイルの追加
次に、水平方向の配置と美しい効果を実現するために、適切な CSS スタイルをナビゲーションタグに追加する必要があります。サンプルコードは次のとおりです。

.nav {
  background-color: #f1f1f1;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 10px;
}

.nav li a {
  color: #333;
  text-decoration: none;
}

.nav li a:hover {
  color: #f00;
}

ログイン後にコピー

説明:

.nav クラスは、background を設定することにより、ナビゲーションラベルのコンテナーです。 - color は背景色の設定を実装します。
.nav ul クラスは順序なしリストであり、水平方向の配置の効果は display: flex を設定することで実現されます。
.nav li クラスはリスト項目であり、リスト項目間の間隔は margin を設定することで実現されます。
.nav li a はリスト項目のリンクテキストです。リンクフォントの色は、color を設定することで設定できます。
.nav li a:hoverクラスはマウスホバー時のスタイルで、colorを設定することでリンクの色を切り替えることができます。

使用例
HTML コードと CSS コードを <head> や <body># などの適切な場所に配置します。 ## タグの間。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>导航标签布局</title>
  <style>
    /* CSS代码 */
  </style>
</head>
<body>
  <!-- HTML代码 -->
</body>
</html>

ログイン後にコピー