HTML+CSS zum Erstellen eines Menüs in der oberen Navigationsleiste

HTML+CSS zum Erstellen eines Menüs in der oberen Navigationsleiste

Navigationsleiste erstellen:

Technische Voraussetzungen:

  • CSS
  • HTML-Tags

Leistungszweck:

Erstellen eines Navigationsleistenmenüs

Code-Analyse:

  • Grundstil Klar
  • Ungeordnete Ursprungslöschung
  • Unterstreichung entfernen
  • Text wird standardmäßig zentriert
  • Das a-Tag setzt das Block-Level-Element
  • Pseudoklassenselektor ändert den Zustand

Schrittweise Umsetzung:

Dreispaltiges Layout: Floats verwenden

Eine Spalte für das Logo; eine Spalte für die Auswahlspalte; eine Spalte für die Suchspalte

Logoteil:

img-Tag, Bilder importieren, ein Tag-Hyperlink, img-Bilder importieren, um Bildverzerrungen zu vermeiden, legen Sie einfach eine Breite und Höhe fest

<div Klasse="Logo">
              <a href="#">
                  <img src="D:\Huizhou Hakka Nudeln.jpg" width="150" alt="Huizhou Hakka Nudeln">
              </a>
          </div>

Spalte auswählen: ul>li tag

Listen-Tag, ein Tag-Hyperlink

<ul Klasse="Liste">
              <li>
                  <a href="#">Schweinefußnudeln</a>
              </li>
              <li>
                  <a href="#">Gegrillte Nudeln mit Schweinefleisch</a>
              </li>
              <li>
                  <a href="#">Fleischbällchen-Nudeln</a>
              </li>
              <li>
                  <a href="#">Geschmorte Eiernudeln</a>
              </li>
              <li>
                  <a href="#">Vegetarische Nudeln</a>
              </li>
              <li>
                  <a href="#">Sakura-Nudeln</a>
              </li>
              <li>
                  <a href="#">Schweinefüße Gegrillte Schweinefleischnudeln</a>
              </li>
              <li>
                  <a href="#">Geschmorte Schweinefüße und Eiernudeln</a>
              </li>
              <li>
                  <a href="#">Schweinefüße-Fleischbällchen-Nudeln</a>
              </li>
              <li>
                  <a href="#">Gegrillte Nudeln mit Schweinefleischbällchen</a>
              </li>
          </ul>

Suchleiste:

Schriftformen, Eingabeattribute, Eingabefelder und Schaltflächen

<div Klasse="Suche">
              <form>
                   <input type="submit" value="Suche" class="search1">
                  <Eingabetyp="Text" Klasse="Inhalt1">
                 
              </form>
  </div>

Implementierungsanalyse:

Legen Sie zunächst im Textkörper eine Site-Header-Box fest, mit einer zentralen Box innerhalb der Header-Box.

<div Klasse="Header">
      <div Klasse="Container" Clearfix>
</div>
      </div>

Platzieren Sie das Logo, die Auswahlleiste und die Suchleiste im mittleren Feld

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-kompatibel" content="IE=edge">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Huizhou Hakka Nudeln</title>
</Kopf>
<Text>
 <div Klasse="Header">
     <div Klasse="Container" Clearfix>
         <div Klasse="Logo">
             <a href="#">
                 <img src="D:\Desktop\Internet+Unternehmerwettbewerb/Huizhou Hakka Noodles Material/WeChat Picture_20210423194229.jpg" width="150" alt="Huizhou Hakka Noodles">
             </a>
         </div>
         <ul Klasse="Liste">
             <li>
                 <a href="#">Schweinefußnudeln</a>
             </li>
             <li>
                 <a href="#">Gegrillte Nudeln mit Schweinefleisch</a>
             </li>
             <li>
                 <a href="#">Fleischbällchen-Nudeln</a>
             </li>
             <li>
                 <a href="#">Geschmorte Eiernudeln</a>
             </li>
             <li>
                 <a href="#">Vegetarische Nudeln</a>
             </li>
             <li>
                 <a href="#">Sakura-Nudeln</a>
             </li>
             <li>
                 <a href="#">Schweinefüße Gegrillte Schweinefleischnudeln</a>
             </li>
             <li>
                 <a href="#">Geschmorte Schweinefüße und Eiernudeln</a>
             </li>
             <li>
                 <a href="#">Schweinefüße-Fleischbällchen-Nudeln</a>
             </li>
             <li>
                 <a href="#">Gegrillte Nudeln mit Schweinefleischbällchen</a>
             </li>
         </ul>
         <div Klasse="Suche">
             <form>
                  <input type="submit" value="Suche" class="search1">
                 <Eingabetyp="Text" Klasse="Inhalt1">
                
             </form>
 </div>
     </div>

 </div>
</body>
</html>

Implementierung 1:

Bildbeschreibung hier einfügen

Kommt es Ihnen nicht schön genug vor? Versuchen wir es mit CSS!

CSS Code:

Löschen Sie die Unterstreichung des A-Tags, löschen Sie den ungeordneten Ursprung des Li-Tags und zeigen Sie sie in einer Zeile an.

.header{
    Breite: 100 %;
    Höhe: 100px;
    Hintergrundfarbe: rgb(207, 238, 238);
    Position: relativ;
}

.Container{
    Breite: 1226px;
    Höhe: 20px;
    Rand: 0 automatisch;
}

.header .logo{
    schweben: links;
    Rand oben: 25px;
}

.logo a{
    Anzeige: Block;
    Breite: 150px;
    Höhe: 150px;
}

.header .liste{
    schweben: links;
    Breite: 820px;
    Höhe: 88px;
    Polsterung: 12px 0 0 30px;
}

klarfix::nach{
    Inhalt: '';
    klar: beides;
    Anzeige: Block;
}

A{
    Textdekoration: keine;
}

.header li{
    schweben: links;
    Listenstil: keiner;
}

.Liste li{
    Polsterung: 28px 10px 38px;
    Anzeige: Block;
    Farbe: rgb(68, 57, 5);
}

 .suchen{
    schweben: rechts;
    Breite: 296px;
    Rand oben: 10px;
    Position: absolut;
    oben: 28px;
    rechts: 53px;
}
.Suchformular{
    Höhe: 50px;
    Breite: 296px;
} 

 .Inhalt1{
     Anzeige: Block;
    Breite: 223px;
    Höhe: 48px;
    Rand: 1px durchgezogen #e0e0e0;
    Polsterung: 0 10px;
    schweben: rechts;
    
}

.suche1{
    Breite: 49px;
    Höhe: 49px;
    schweben: rechts;
} 

.list li:hover{
    Farbe: rgb(168, 81, 81);
    Schriftgröße: groß;
}

Externen Import verwenden:

<link rel="stylesheet" href="Huizhou Hakka Noodles.css">

Lassen Sie uns das abschließend klären:

Erstellen Sie eine HTML-Datei und geben Sie den folgenden Code ein

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <link rel="stylesheet" href="Huizhou Hakka Noodles.css">
  <title>Huizhou Hakka Nudeln</title>
</Kopf>
<Text>
  <div Klasse="Header">
      <div Klasse="Container" Clearfix>
          <div Klasse="Logo">
              <a href="#">
                  <img src="D:\Huizhou Hakka Nudeln.jpg" width="150" alt="Huizhou Hakka Nudeln">
              </a>
          </div>
          <ul Klasse="Liste">
              <li>
                  <a href="#">Schweinefußnudeln</a>
              </li>
              <li>
                  <a href="#">Gegrillte Nudeln mit Schweinefleisch</a>
              </li>
              <li>
                  <a href="#">Fleischbällchen-Nudeln</a>
              </li>
              <li>
                  <a href="#">Geschmorte Eiernudeln</a>
              </li>
              <li>
                  <a href="#">Vegetarische Nudeln</a>
              </li>
              <li>
                  <a href="#">Sakura-Nudeln</a>
              </li>
              <li>
                  <a href="#">Schweinefüße Gegrillte Schweinefleischnudeln</a>
              </li>
              <li>
                  <a href="#">Geschmorte Schweinefüße und Eiernudeln</a>
              </li>
              <li>
                  <a href="#">Schweinefüße-Fleischbällchen-Nudeln</a>
              </li>
              <li>
                  <a href="#">Gegrillte Nudeln mit Schweinefleischbällchen</a>
              </li>
          </ul>
          <div Klasse="Suche">
              <form>
                   <input type="submit" value="Suche" class="search1">
                  <Eingabetyp="Text" Klasse="Inhalt1">
                 
              </form>
  </div>
      </div>

  </div>
</body>
</html>

Erstellen Sie eine CSS-Datei und geben Sie den folgenden Code ein.

.header{
  Breite: 100 %;
  Höhe: 100px;
  Hintergrundfarbe: rgb(207, 238, 238);
  Position: relativ;
}

.Container{
  Breite: 1226px;
  Höhe: 20px;
  Rand: 0 automatisch;
}

.header .logo{
  schweben: links;
  Rand oben: 25px;
}

.logo a{
  Anzeige: Block;
  Breite: 150px;
  Höhe: 150px;
}

.header .liste{
  schweben: links;
  Breite: 820px;
  Höhe: 88px;
  Polsterung: 12px 0 0 30px;
}

klarfix::nach{
  Inhalt: '';
  klar: beides;
  Anzeige: Block;
}

A{
  Textdekoration: keine;
}

.header li{
  schweben: links;
  Listenstil: keiner;
}

.Liste li{
  Polsterung: 28px 10px 38px;
  Anzeige: Block;
  Farbe: rgb(68, 57, 5);
}

 .suchen{
  schweben: rechts;
  Breite: 296px;
  Rand oben: 10px;
  Position: absolut;
  oben: 28px;
  rechts: 53px;
}
.Suchformular{
  Höhe: 50px;
  Breite: 296px;
} 

.Inhalt1{
   Anzeige: Block;
  Breite: 223px;
  Höhe: 48px;
  Rand: 1px durchgezogen #e0e0e0;
  Polsterung: 0 10px;
  schweben: rechts;
  
}

.suche1{
  Breite: 49px;
  Höhe: 49px;
  schweben: rechts;
} 

.list li:hover{
  Farbe: rgb(168, 81, 81);
  Schriftgröße: groß;
}

Implementierung 2:

Bildbeschreibung hier einfügen

Um die Schrift zu vergrößern, bewegen Sie die Maus über das Symbol.

Produktionsanleitung:

  • Ändern Sie die Position des Logos in die Position Ihres Bildes. Das Alt-Attribut ist das Wort, das verwendet wird, wenn das Bild auf der Webseite nicht angezeigt werden kann.
  • Das a-Attribut im "li"-Tag verlinkt die Webseite, auf die Sie verlinken möchten, und der Text im "li"-Tag wird durch den gewünschten Text ersetzt.
  • Ändern Sie die Hintergrundfarbe in CSS **.header background-color:** in die gewünschte Farbe.
  • Für die Schrifteffekte im „li“-Tag ändern Sie **.list li:hover** in CSS.

Farbänderung:

.header{
  Breite: 100 %;
  Höhe: 100px;
  Hintergrundfarbe: rgb(207, 238, 238);
  Position: relativ;
}

Etiketteneffekte:

.list li:hover{
  Farbe: rgb(168, 81, 81);
  Schriftgröße: groß;
}

Dies ist das Ende dieses Artikels über die Verwendung von HTML+CSS zum Erstellen eines Menüs in der oberen Navigationsleiste. Weitere relevante HTML-CSS-Inhalte für das Menü in der oberen Navigationsleiste finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  CSS Polarkoordinaten Beispielcode

>>:  HTML CSS3 streckt den Bildanzeigeeffekt nicht

Artikel empfehlen

Probleme und Lösungen für die Bereitstellung der Dual-Active-Architektur Nginx+KeepAlived-Cluster in VMware

Vorwort Verwenden Sie nginx zum Lastenausgleich. ...

Optimierung der Web-Frontend-Leistung

Best Practices für die Web-Frontend-Optimierung: ...

Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

Vorwort Manchmal habe ich das Gefühl, dass die na...

So installieren Sie den MySQL 5.7.28-Binärmodus unter CentOS 7.4

Linux-Systemversion: CentOS7.4 MySQL-Version: 5.7...

So verwenden Sie reguläre Ausdrücke, um Platzhalterdomänennamen in Nginx automatisch abzugleichen

Nginx verwendet reguläre Ausdrücke, um Platzhalte...

So erstellen (CREATE PROCEDURE) und rufen (CALL) Sie eine gespeicherte MySQL-Prozedur auf und so erstellen (DECLARE) und weisen (SET) Sie eine Variable zu

Dieser Artikel beschreibt anhand von Beispielen, ...

So richten Sie Referer in Nginx ein, um Bilddiebstahl zu verhindern

Wenn die Bilder des Servers von anderen Websites ...

Verständnis und Anwendungsanalyse der pessimistischen und optimistischen Sperre von MySQL

In diesem Artikel werden die pessimistische und d...

Ein vollständiges Beispiel für die Abfrage von Batchdaten aus einer Tabelle durch MySQL und deren Einfügen in eine andere Tabelle

Sag es im Voraus Nodejs liest die Datenbank als a...

So verbessern Sie die Sicherheit von Linux- und Unix-Servern

Netzwerksicherheit ist ein sehr wichtiges Thema u...

Grafisches Tutorial zur Installation einer virtuellen VMware-Maschine unter Linux

In diesem Artikel werden die einzelnen Schritte d...

Demo für 10-Farbverlaufshintergrund des CSS-Containers (linear-gradient())

Grammatik Hintergrund: linearer Farbverlauf (Rich...

5 Möglichkeiten zum Senden von E-Mails in der Linux-Befehlszeile (empfohlen)

Wenn Sie eine E-Mail in einem Shell-Skript erstel...

Analyse der Implementierungsmethode der Koexistenz von Nginx und Apache unter Linux-Servern

Dieser Artikel beschreibt, wie die Koexistenz von...

Nodejs verwendet Readline, um zur Eingabe von Beispielcode für Inhalte aufzufordern

Inhaltsverzeichnis Vorwort 1. bat führt js aus 2....