Um ein Menü mit einer Ebene zu erstellen, gibt es viele Lösungen. Sie können UL- und LI-Tags verwenden, um Menüelemente einzuschließen. Oder Sie können auch ein div-Tag erstellen, darin befindet sich eine Liste von Menüelementen.

Das Ergebnis dieses Artikels wird die folgende Schnittstelle haben:

Hinweis : Das Menü besteht aus Links, daher müssen wir das a-Tag verwenden, um Links zu jedem seiner Elemente hinzuzufügen.

Erstellen Sie HTML für 1-Level-Menüs

Ich werde die Lösung wählen, um ein div-Tag zu erstellen, um die Menüs zu umschließen.

 <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div> <div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div>

Jetzt muss ich nur noch das CSS für diesen HTML-Code formatieren, um das gewünschte Ergebnis zu erzielen.

Fügen Sie CSS für ein 1-Level-Menü hinzu

Schritt 1 : Ich möchte, dass der Menühintergrund blau ist, also schreibe ich CSS für das umgebende div-Tag.

 .menu{ background: #333 }

Schritt 2 : Erstellen Sie eine weiße Schrift für Menüs. Fügen Sie Leerzeichen hinzu und vergrößern Sie den Abstand zwischen den Menüs.

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; }

Es sieht so viel besser aus, nicht wahr? Jetzt möchte ich einen Effekt erzeugen, wenn ich die Maus über die Menüs bewege, ändert sich der Hintergrund zu Weiß und die Textfarbe zu Blau.

Um CSS für die Mausbewegung zu erstellen, verwenden wir die CSS-Eigenschaft :hover .

 .menu a:hover{ color: #333; background: #fdfdfd; }

Wählen Sie UL- und LI-Tags, um ein Menü mit einer Ebene zu erstellen

Bei dieser Lösung ist die HTML-Struktur etwas kompliziert, aber später, wenn Sie Untermenüs hinzufügen möchten, ist es viel einfacher.

Die HTML-Struktur sieht folgendermaßen aus:

 <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul> <ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul>

Schritt 1 : Standardmäßig hat das ul -Tag CSS-Padding und -Margin. Daher müssen wir zurücksetzen, damit das Menü wie in Teil 1 angezeigt wird. Wir vergessen auch nicht, einen Hintergrund hinzuzufügen.

 .menu{ margin: 0px; padding: 0px; background: #333 }

Schritt 2 : Da das li -Tag als Block angezeigt wird, müssen Sie es zum einen in Inline umwandeln, zum anderen Float verwenden, um es zur Seite zu schieben. Wir sollten auch die Punkte mit list-style:none entfernen.

Ich werde Float verwenden.

 .menu li{ float:left; list-style: none }

Oh, sieht aus, als wäre der Hintergrund weg. Der Grund dafür ist, dass wir float:left für li -Tags verwendet haben, sodass die Höhe des Menüs nicht mehr vom li -Tag abhängt. Lassen Sie uns overflow:hidden property zu .menu und das wird es lösen.

 .menu{ margin: 0px; padding: 0px; background: #333; overflow: hidden }

Schritt 3 : Jetzt müssen wir nur noch das a-Tag wie in Teil 1 gestalten.

 .menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; } .menu a:hover{ color: #333; background: #fff; }

Die Ergebnisse waren wie erwartet.

Also habe ich das Tutorial zum Erstellen eines 1-Level-Menüs mit einfachem HTML und CSS abgeschlossen. In diesem Artikel möchte ich, dass Sie Ihre Fähigkeiten im Umgang mit jeder Situation beim Erstellen eines Menüs üben. Später werden Sie auf viele komplexere Menütypen stoßen.