Heim >Web-Frontend >CSS-Tutorial >Reines CSS zur Realisierung der Label-Navigationsproduktion_Erfahrungsaustausch

Reines CSS zur Realisierung der Label-Navigationsproduktion_Erfahrungsaustausch

WBOY
WBOYOriginal
2016-05-16 12:06:261846Durchsuche

Nach der Suche im Internet habe ich nicht viele Tutorials oder Anleitungen zum Erstellen einer Etikettennavigation ausschließlich mit CSS gefunden. Die meisten davon beinhalten das Schreiben von JS. Das ist für viele Leute, die CSS lernen, wirklich nicht rücksichtsvoll. Da es noch niemand gemacht hat, lass es mich zuerst versuchen! Die CSS-Label-Navigation, die ich hier verwende, ist eine grüne Navigation mit reinem CSS, ohne JS und ohne Hintergrundbild. Dieser Artikel ist für Anfänger geeignet, Experten können vorbeikommen, haha!


[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Code kopieren Der Code lautet wie folgt:

.mainNav{
margin:0 20px
height:47px;
border-bottom:2px solid #000; 20px; -type:none;
position:absolute;
ul li{
margin-right:5px; 🎜> }
ul li a{
width:100px;
text-align:center;
color:#999;
background-color:#FC0; > border-bottom:none;
height:#FFF;
border:2px; #000;
border-bottom:none;
.con{
margin:0 20px;
color:#FFF; color:#F60;
border:2px solid #000; Code


Der Code lautet wie folgt:

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn