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

So implementieren Sie die GZIP-Komprimierung in Nginx, um die Website-Geschwindigkeit zu verbessern

Inhaltsverzeichnis Warum GZIP-Komprimierung verwe...

Beispiel für die Verwendung von UserMap in IMG

usemap ist ein Attribut des <img>-Tags, das ...

Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306

Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306. A...

Implementierung von Platzhaltern und Escape-Zeichen in der Linux-Befehlszeile

Wenn wir Stapeloperationen für einen Dateityp aus...

Detaillierte Erläuterung der Ideen zur Fehlerbehebung bei PHP+nginx-Dienstfehlern 500 502

Überblick Wenn beim Zugriff auf einen Onlinediens...

Beispielcode für den Anzeigeeffekt zum Schütteln und Vergrößern von JS-Albumbildern

Im vorherigen Artikel wurde erläutert, wie Sie mi...

Beispielcode für den dynamischen CSS-Ladebalkeneffekt

Mit dem Wissen über CSS-Variablen werde ich den C...

Implementierung interaktiver Daten zwischen QT und Javascript

1. Daten fließen von QT zu JS 1. QT ruft die JS-F...

MySQL Serie 4 SQL-Syntax

Inhaltsverzeichnis Tutorial-Reihe 1. Einführung u...

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

Ich bin in letzter Zeit auf viele Zentrierungspro...

Zusammenfassung und Analyse häufig verwendeter Docker-Befehle und Beispiele

Inhalt 1. Container-Lebenszyklusmanagement (1) Do...

Schritte zum Konfigurieren von Nginx SSL zur Implementierung des HTTPS-Zugriffs (für Anfänger geeignet)

Vorwort Nach der Bereitstellung des Servers besuc...

Häufige Tomcat-Ausnahmen und Lösungscodebeispiele

Das Unternehmensprojekt wurde in Java entwickelt ...

Legen Sie ein Symbol für die Website fest, das ganz links auf der Registerkarte des Browsers angezeigt werden soll

Was ist der Zweck dieses Satzes? Code kopieren Der...

Vite+Electron zum schnellen Erstellen von VUE3-Desktopanwendungen

Inhaltsverzeichnis 1. Einleitung 2. Erstellen Sie...