So erstellen Sie ein responsives Bildnavigationslayout mit HTML und CSS-HTML-Tutorial-php.cn

So erstellen Sie ein responsives Bildnavigationslayout mit HTML und CSS

WBOY

Freigeben： 2023-10-20 09:55:52

Original

1408 Leute haben es durchsucht

So erstellen Sie ein responsives Bildnavigationslayout mit HTML und CSS

HTML und CSS sind wichtige Werkzeuge zum Erstellen von Webseitenlayouts. Durch die Verwendung von HTML-Struktur-Tags und CSS-Stilregeln können wir eine Vielzahl von Seitenlayouts erstellen. In diesem Artikel erfahren Sie, wie Sie mit HTML und CSS ein responsives Bildnavigationslayout erstellen.

Zuerst schreiben wir den HTML-Code.

<!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>

Nach dem Login kopieren

Im obigen Code erstellen wir eine Navigationsleiste. Die Navigationsleiste enthält eine ungeordnete Liste und jedes Listenelement enthält ein Ankerelement mit einem Bild und einem Link. Bitte stellen Sie sicher, dass Sie im Attribut src den entsprechenden Bildpfad angeben. 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;
  }
}

Nach dem Login kopieren

在上面的CSS代码中，我们为导航栏和列表项设置了一些基本的样式。我们还使用媒体查询来设置在屏幕宽度小于600px时列表项应该显示为块级元素。

最后，我们需要创建一个名为style.css

Als nächstes schreiben wir CSS-Code, um der Navigationsleiste Stile hinzuzufügen.

rrreee

Im obigen CSS-Code haben wir einige grundlegende Stile für die Navigationsleiste und Listenelemente festgelegt. Wir verwenden auch Medienabfragen, um festzulegen, dass die Listenelemente als Elemente auf Blockebene angezeigt werden sollen, wenn die Bildschirmbreite weniger als 600 Pixel beträgt.

Schließlich müssen wir ein externes Stylesheet namens style.css erstellen und es mit der HTML-Datei verbinden.

Jetzt können wir die HTML-Datei im Browser öffnen und unser responsives Bildnavigationslayout anzeigen. Wenn die Bildschirmbreite größer als 600 Pixel ist, sollte die Navigationsleiste horizontal angezeigt werden, etwa so:

[Home] [Über] [Dienste] [Kontakt]

Wenn die Bildschirmbreite weniger als 600 Pixel beträgt, sollte die Navigationsleiste vertikal angezeigt werden , etwa so:

[Startseite]

[Über uns]🎜[Dienstleistungen]🎜[Kontakt]🎜🎜Durch die Verwendung von HTML und CSS haben wir ein einfaches responsives Bildnavigationslayout erstellt. Sie können den Stil weiter anpassen und weitere Funktionen hinzufügen, um sie an Ihre Bedürfnisse anzupassen. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein responsives Bildnavigationslayout mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!