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

Analyse der Benutzererfahrung beim Design von Facebook-Dating-Websites

<br />Verwandter Artikel: Analyse der Inform...

MySQL-Datenbank-Entwicklungsspezifikationen [empfohlen]

Vor Kurzem haben wir SQL zur Optimierung online e...

Eine eingehende Analyse von MySQL erläutert die Verwendung und die Ergebnisse

Vorwort Bei unserer täglichen Arbeit führen wir m...

So verwenden Sie & und nohup im Hintergrund von Linux

Wenn wir in einem Terminal oder einer Konsole arb...

Vue + Express + Socket realisiert Chat-Funktion

In diesem Artikel wird der spezifische Code von V...

Die Standard-HTML-Schreibmethode unterscheidet sich von der von Dreamweaver automatisch generierten

Code kopieren Der Code lautet wie folgt: <!--d...

Win10 Installation von MySQL 5.7 MSI-Version des Tutorials mit Bildern und Text

Ich habe es im MSI-Format installiert, hauptsächl...

Detaillierte Erklärung des Unterschieds zwischen WeChat-Applet Bindtap und Catchtap

Inhaltsverzeichnis 1. Was ist eine Veranstaltung?...

Beispielcode zur Implementierung einer einfachen Suchmaschine mit MySQL

Inhaltsverzeichnis Vorwort Einführung Ngram-Vollt...

Mycli ist ein unverzichtbares Tool für MySQL-Befehlszeilen-Enthusiasten

mycli MyCLI ist eine Befehlszeilenschnittstelle f...

Ideen und Codes zur Implementierung von Iframes, um einen Teil des Website-Inhalts abzufangen

Code kopieren Der Code lautet wie folgt: <div ...

CentOS 7.x-Bereitstellung von Master- und Slave-DNS-Servern

1. Vorbereitung Beispiel: Zwei Maschinen: 192.168...

Welche Vorteile bietet die Verwendung von // anstelle von http:// (adaptives https)?

//Standardprotokoll /Die Verwendung des Standardp...

Detaillierte Erklärung des JavaScript ES6-Moduls

Inhaltsverzeichnis 0. Was ist ein Modul 1.Modul l...

Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen

1. Komplexe SQL-Abfragen 1.1. Einzeltabellenabfra...