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
So beheben Sie den MySQL-Fehler 1033. Falsche Informationen in der Datei: „xxx.frm“
Problembeschreibung 1. Datenbank der Sammelstelle...
JDBC-Erkundung SQLException-Analyse
1. Übersicht über SQLException Wenn bei der Verwe...
Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen
1. Komplexe SQL-Abfragen 1.1. Einzeltabellenabfra...
Tutorial-Diagramm zur Installation von CentOS und Qt in einer virtuellen VMware-Maschine
Vmware-Installation Pakete installieren Download-...
Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)
1. Das Konzept von CSS: (Cascading Style Sheet) V...
Detaillierte Erklärung der Lösung für den Fehler von VMware, das Modul diskearly zu öffnen
VMWare (Virtual Machine Ware) ist ein Softwareunt...
Linux-Swap-Partition (ausführliche Erklärung)
Inhaltsverzeichnis linux 1. Was ist SWAP 2. Was p...
Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen
Wie debuggt man eine Seite auf dem iPad? Wenn Sie ...
Zeigen Sie die vom Prozess in Linux belegte Portnummer an
Für Linux-Systemadministratoren ist es von entsch...
Beispiel für die Bereitstellung eines Django-Projekts mit Docker
Es ist auch sehr einfach, Django-Projekte mit Doc...
Ausführliche Erklärung zu MySQL vom Einstieg bis zum Aufgeben - Installation
Was Sie lernen werden 1. Softwareinstallation und...
Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/Telefongeräte
Vorwort Heutzutage gibt es viele Geräte, darunter...
MySQL implementiert eine Beispielmethode zum Anmelden ohne Kennwort
Spezifische Methode: Schritt 1: Stoppen Sie den M...
JS implementiert das Ziehen des Fortschrittsbalkens, um die Transparenz von Elementen zu ändern
Was ich heute teilen möchte, ist die Verwendung v...
Implementieren Sie über 24 Array-Methoden in JavaScript von Hand
Inhaltsverzeichnis 1. Traversal-Klasse 1. fürJede...