CSS-Implementierungsmenü

In diesem Artikel wird erläutert, wie Sie mit CSS ein einfaches Menü implementieren. CSS (Cascading Style Sheets) ist eine Stilsprache, die auf Webseiten angelegt und angezeigt wird. Ihre Hauptfunktion besteht darin, HTML-Dokumenten Stil und Layout hinzuzufügen. In diesem Menübeispiel verwenden wir CSS, um den Stil und das Layout des Menüs zu steuern.

Zuerst müssen wir die HTML-Struktur erstellen, einschließlich eines

-Elements. Diese Elemente bilden unser Menü, wobei jedes
• -Element ein Menüpunkt ist. Zum Beispiel:

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

  Nach dem Login kopieren

  Die obige HTML-Struktur generiert das folgende Menü:

  

  Als nächstes verwenden wir CSS, um Stil hinzuzufügen .

  Zuerst legen wir einige grundlegende Stile für das

  -Element fest:

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  Nach dem Login kopieren

  Dadurch werden in der Menüliste nicht die Standardpunkte angezeigt und die Standardaußenränder werden entfernt Abstand und Polsterung.

  Als nächstes fügen wir jedem Menüpunkt einige Stile hinzu und verwenden das Float-Attribut, um sie in einer Reihe anzuordnen:

  li {
    float: left;
  }
  
  li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }

  Nach dem Login kopieren

  Dadurch wird jeder Menüpunkt in einer Reihe angeordnet Sie können eine Zeile der Leiste hinzufügen und Stile hinzufügen, indem Sie beispielsweise den Link in ein Blockelement umwandeln, Abstände, Textdekorationen sowie Farben und Schriftarten festlegen.

  Zuletzt wenden wir einige Stile auf die Menüleiste an:

  nav {
    background-color: #f1f1f1;
  }
  
  nav ul {
    overflow: auto;
    width: 100%;
  }
  
  nav li {
    float: left;
  }
  
  nav a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }
  
  nav a:hover {
    background-color: #ddd;
    color: #333;
  }

  Nach dem Login kopieren

  Wir haben die Eigenschaft „background-color“ verwendet, um die Hintergrundfarbe für die Menüleiste festzulegen, und die Eigenschaft „overflow“. um die Menüleiste scrollbar zu machen. Darüber hinaus legen wir die Hintergrund- und Hover-Stile der Menüpunkte fest.

  Abschließend lautet unsere CSS-Implementierung des Menüs wie folgt:

  

  Durch die oben genannten Schritte haben wir eine einfache Implementierung implementiert CSS-Menü, diese Methode kann in verschiedenen Projekten verwendet werden und personalisierte Änderungen können auf verschiedene Arten von Websites angewendet werden. Während des Implementierungsprozesses müssen Sie die relevanten Eigenschaften und Funktionen von CSS verstehen und diese flexibel nutzen, um die gewünschte Wirkung des Menüs zu erzielen.

  Das obige ist der detaillierte Inhalt vonCSS-Implementierungsmenü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!