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
Eine kurze Diskussion über die Indexseitenstruktur, den Einfügepuffer und den adaptiven Hash-Index von InnoDB
Physische Struktur eines InnoDB-Index Alle InnoDB...
Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL
1. CSV-Datei importieren Verwenden Sie den folgen...
Hinweise zum Systemaufruf des Linux-Kernel-Gerätetreibers
/**************************** * Systemaufruf*****...
Ubuntu installiert mehrere Versionen von CUDA und wechselt jederzeit
Ich werde nicht erklären, was CUDA ist, sondern d...
Docker stellt eine Verbindung zum Host-Mysql-Vorgang her
Heute muss das Unternehmensprojekt Docker konfigu...
Probleme und Lösungen beim Ersetzen von Oracle durch MySQL
Inhaltsverzeichnis Migrationstools Anwendungstran...
Vue verwendet die Methode in der Referenzbibliothek mit Quellcode
Der offizielle Quellcode von monaco-editor-vue la...
Tutorial zu HTML-Tabellen-Tags (13): Regeln für interne Rahmenstilattribute
Mit REGELN kann die Art der inneren Rahmen der Ta...
Detaillierte Erklärung zur Verwendung von Teleport in Vue3
Inhaltsverzeichnis Zweck des Teleports So funktio...
Eine kurze Diskussion über Flex-Layout und Skalierungsberechnung
1. Einführung in Flex Layout Flex ist die Abkürzu...
JS realisiert die Kartenausgabe-Animation
In diesem Artikelbeispiel wird der spezifische JS...
Detailliertes Tutorial zum Bereitstellen eines Springboot-Projekts mit Nginx auf dem Server (JAR-Paket)
1. Packen Sie das Java-Projekt in ein JAR-Paket H...
Lösung für das Problem, dass der Image-Name nach dem Laden des Dockers keiner ist
Kürzlich habe ich festgestellt, dass nach der Ver...
Eine kurze Erläuterung zweier Methoden zur Lösung von platzgleichmäßigen Kompatibilitätsproblemen
Seit seiner Einführung im Jahr 2009 wird Flex von...
Der Unterschied zwischen HTML, XHTML und XML
Entwicklungstrends: html (Hypertext-Markup-Sprache...