HTML+CSS zur Realisierung einer einfachen Navigationsleistenfunktion
|
Ohne weitere Umschweife komme ich gleich zum Code (Neuling: Es gibt wirklich nicht viel zu sagen)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta charset="utf-8" />
<title>Navigationsleiste</title>
<style type="text/css">
#nav{
Breite: 100 %;
Höhe: 39px;
Rand: 0px;
Hintergrund: #808080
}
#nav ul li{
Rand: 5px 10px;
schweben: links;
Listenstil: keiner;
}
#nav ul li a{
schweben: links;
Polsterung: 0px 16px;
<!--margin:auto;-->
Farbe: #ffffff;
Schriftgröße: 15px;
}
</Stil>
</Kopf>
<Text>
<div id="nav">
<ul>
<li ><a href="#">Startseite</a></li>
<li ><a href="#">Freunde</a></li>
<li ><a href="#">Shop</a></li>
<li ><a href="#">Laden Sie den Client herunter</a></li>
</ul>
</div>
</body>
</html>Die Hauptsache ist, CSS (Cascading Style Sheets) zum Formatieren des HTML-Inhalts zu verwenden (nicht sehr gut zum Ausdrücken); Sie können den Bezeichner direkt verwenden, um das Format des Elements festzulegen. Um ein Element mit der ID „nav“ zu formatieren, fügen Sie davor ein # hinzu. Um das Format der Klasse „nav“ zu ändern, fügen Sie vor „nav“ einen „.“ hinzu. Ich bin mit diesen drei Anwendungen nicht sehr vertraut und werde daher nicht näher darauf eingehen. Ich hoffe, dass mir einige Experten weiterhelfen können oder jemand mit mir diskutieren kann. CSS-Code kann mit den Start-Tags Hier ist ein einfacher CSS-Code für die Navigationsleiste, nicht viel, nur in den Kopf eingebettet Das Obige ist eine Möglichkeit, auf CSS zu verweisen: eingebettetes Stylesheet --------------------------------------------------------------------------------------------------------------------------- Wenn viele CSS-Codes vorhanden sind, können Sie die Codes direkt in die CSS-Datei schreiben und dann das Link-Tag verwenden, um das Stylesheet-CSS im Kopf der HTML-Datei einzuführen. Die zweite Möglichkeit, die obigen Fakten zu zitieren: externes Stylesheet (heutzutage sind Webseiten komplizierter, diese Methode wird häufiger verwendet) Ein weiterer Typ sind Inline-Stylesheets, die hier nicht erläutert werden. Zusammenfassen Das Obige ist die Einführung des Herausgebers in die einfache Navigationsleistenfunktion, die durch HTML + CSS implementiert wird. Ich hoffe, es wird allen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld
>>: CentOS 7 kann nach dem Ändern der Netzwerkkarte nicht auf das Internet zugreifen
Artikel empfehlen
JavaScript implementiert einen langen Bild-Scroll-Effekt
In diesem Artikel wird der spezifische Code für d...
Konvertieren von XHTML-CSS-Seiten in Druckerseiten
<br />In der Vergangenheit musste zum Erstel...
Empfohlene Tipps für Web-Frontend-Ingenieure
Lassen Sie uns zunächst über den Wert von Web-Fro...
Hinzufügen und Löschen von Tabelleninformationen mit Javascript
Erste Schritte mit JavaScript JavaScript ist eine...
Zwei Möglichkeiten zum Zurücksetzen des Root-Passworts einer MySQL-Datenbank mit lnmp
Die erste Methode: Verwenden Sie Junges Ein-Klick...
Ausführliches Installationstutorial für MySQL 8.0.12 winx64
In diesem Artikel finden Sie das Installations-Tu...
Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle
Was ist eine Tabelle? Es besteht aus Zellenzellen...
Zabbix implementiert die Überwachung mehrerer MySQL-Prozesse
Auf einem Server werden drei MySQL-Instanzprozess...
HTML-Subtag und Sup-Tag
Heute stelle ich zwei HTML-Tags vor, die ich nich...
js, um einen 3D-Karusselleffekt zu erzielen
In diesem Artikel wird der spezifische Code zur I...
mysql5.7-Remotezugriffseinstellungen
Das Einrichten des Fernzugriffs in mysql5.7 funkt...
Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile
Die Layui-Tabelle enthält mehrere Datenzeilen. Üb...
Detaillierte Erläuterung der Installations-, Konfigurations-, Start- und Herunterfahrmethoden des MySQL-Servers
1. Download von der offiziellen Website: https://...
So geben Sie chinesische Zeichen im Linux-Kernel aus
Sie können problemlos Chinesisch eingeben und im ...
Beispielcode zur Implementierung des Aushöhlungseffekts mit CSS
Wirkungsprinzip Verwenden Sie hauptsächlich CSS-F...