So erstellen Sie eine horizontale Navigationsleiste in CSS

Die Schritte zum Erstellen einer horizontalen Navigationsleiste mithilfe von CSS sind wie folgt: Erstellen Sie eine HTML-Navigationsstruktur. CSS-Stile anwenden: display: flex; align-items: center; padding: 0; Rand rechts: 1em; Stillink: Textdekoration: Keine; Farbe: Schwarz; Mouseover-Status: a:hov

So erstellen Sie eine horizontale Navigationsleiste mit CSS ist eine allgemeine Anforderung für die meisten Website-Designs. Mithilfe von CSS lässt sich dies ganz einfach erreichen, indem Sie die folgenden Schritte ausführen:

HTML-Struktur erstellen:

<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-Stil anwenden:

1. Layout-Container:

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

Anzeige: Flex Ermöglicht die Umwandlung der Navigationsleiste in einen horizontal angeordneten Container. <ul> <code>justify-content: center zentriert seinen Inhalt horizontal.

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:hoveralign-items: center zentriert den Inhalt vertikal.

2. Stilliste:

rrreee

display: flex wandelt die Liste auch in einen horizontalen Container um. 🎜🎜list-style-type: none Aufzählungspunkte entfernen. 🎜🎜margin: 0 und padding: 0 entfernen Standardabstände und -polster. 🎜🎜🎜🎜3. Stillistenelemente: 🎜🎜rrreee🎜🎜margin-right: 1em Fügen Sie etwas Abstand zwischen den einzelnen Listenelementen hinzu. 🎜🎜🎜🎜4. Stil-Link: 🎜🎜rrreee🎜🎜text-decoration: none Link-Unterstreichung entfernen. 🎜🎜Farbe: Schwarz Setze den Linktext auf Schwarz. 🎜🎜🎜🎜5. Mouseover-Status: 🎜🎜rrreee🎜🎜a:hover Setzen Sie die Textfarbe auf Blau, wenn sich die Maus über dem Link befindet. 🎜🎜🎜🎜Ergebnis: 🎜🎜🎜Wenn Sie diese Schritte ausführen, wird eine horizontale Navigationsleiste erstellt, in der Elemente horizontal zueinander und zentriert auf dem Bildschirm angeordnet sind. Der Linktext wird blau, wenn Sie mit der Maus darüber fahren. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine horizontale Navigationsleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!