Navigation ist eine sehr wichtige Komponente im Webseitenerstellungsprozess. Navigation ist nicht nur die Kernfunktion von Webseiten, sondern spielt auch eine Rolle bei der Verschönerung von Webseiten und der Verbesserung der Benutzererfahrung. Bei der Verschönerung und Gestaltung von Webseiten kann CSS als Stylesheet der Webseite auch zur Implementierung verschiedener Navigationsstile verwendet werden. In diesem Artikel wird vorgestellt, wie CSS die Webseitennavigation implementiert.
Grundlegende Struktur des CSS-Stylesheets
CSS-Stylesheet wird häufig beim Design und Layout von Webseiten verwendet. Seine Grundstruktur ist wie folgt:
选择器{
属性1:属性值1;
属性2:属性值2;
...
}Der Selektor bezieht sich auf das oder die Elemente, die gestylt werden sollen. Attribute beziehen sich auf Stile wie Farbe, Breite, Höhe usw., während sich Attributwerte auf die Werte beziehen, die den Attributen entsprechen. Wenn ein Stylesheet auf ein HTML-Dokument angewendet wird, werden die darin enthaltenen Stilattribute automatisch auf die entsprechenden HTML-Elemente angewendet.
Grundlegende Konzepte des mit CSS implementierten Navigationsmenüs
Wenn Sie CSS-Stylesheets zum Entwerfen von Navigationsmenüs verwenden, müssen Sie die folgenden Grundkonzepte beherrschen:
Horizontales Navigationsmenü mit CSS implementiert
Im Folgenden erfahren Sie, wie Sie ein einfaches horizontales Navigationsmenü mit CSS implementieren. Dieser Menüpunkt enthält 5 verschiedene Optionen. Wenn der Benutzer auf einen Menüpunkt klickt, ändert sich die Hintergrundfarbe des entsprechenden Menüpunkts.
<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Nav</title>
<style>
nav{
display: inline-block;
background: #e74c3c;
}
ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li{
margin: 0;
padding: 0;
}
a{
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
a:hover,
a:focus,
a:active{
background: #c0392b;
}
.active a{
background: #ffffff;
color: #e74c3c;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>Durch das Schreiben des obigen HTML- und CSS-Codes können wir ein grundlegendes horizontales Navigationsmenü implementieren. Die spezifische Implementierungsmethode lautet unter anderem wie folgt:
Von CSS implementiertes vertikales Navigationsmenü
Zusätzlich zur Implementierung eines horizontalen Navigationsmenüs kann CSS auch das Design eines vertikalen Navigationsmenüs implementieren. Hier ist der HTML-Code für ein einfaches vertikales Navigationsmenü:
<!DOCTYPE html>
<html>
<head>
<title>CSS Vertical Nav</title>
<style>
nav{
display: inline-block;
background: #2980b9;
height: 100%;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
margin: 0;
padding: 0;
}
a{
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
a:hover,
a:focus,
a:active{
background: #2c3e50;
}
.active a{
background: #ffffff;
color: #2980b9;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>Die Implementierung unterscheidet sich geringfügig vom horizontalen Navigationsmenü. Wir müssen auf folgende Punkte achten:
Zusammenfassung
In diesem Artikel erläutern wir die Anwendung von CSS im Webnavigationsdesign anhand von zwei Fällen. Unabhängig davon, ob es sich um ein horizontales Navigationsmenü oder ein vertikales Navigationsmenü handelt, bietet CSS eine Fülle von Eigenschaften und Stilen für die Implementierung. Ich hoffe, dass die Leser durch die Einleitung dieses Artikels ihr Verständnis von CSS weiter vertiefen und Hilfe für zukünftige Webdesign-Arbeiten bieten können.
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen Webnavigationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
