Wie man eine Navigationsleiste aus einer Liste erstellen auf dem Raspberry Pi
An der Spitze einer Web-Seite ist eine Liste von Links. Sie möchten Ihre Raspberry Pi verwenden sie in eine Navigationsleiste zu drehen, eine Reihe von horizontalen Tasten. Aber Sie wollen nur diese Liste zu machen ein navbar- Sie nicht wollen, andere Links oder Listen auf der Seite zu beeinflussen.
Der erste Schritt ist Tags in die HTML-Datei hinzufügen zu markieren, wo die navbar beginnt und endet, wie folgt aus:
Sie werden den Klassennamen sehen nav für die navbar, so in der CSS-Datei, fügen Sie die folgende Zeile ein, die die Elemente der Liste erscheinen nebeneinander für jeden statt beginnen eine neue Zeile macht:
.nav ul li {display: Inline-}Jetzt können Sie die Links in der Stil nav Klasse, so dass sie aussehen wie Schaltflächen. Das bedeutet nur, dass die Unterstreichung auf den Linktext, so dass der Text fett, mit einer hellen Farbe auf einem dunklen Hintergrund ausschalten (wir haben weiß auf blau gewählt), und das Hinzufügen von etwas Padding der Link zu erscheinen größer, wie ein Knopf. Hier ist der CSS-Code benötigen Sie:
.Aktualisiere um ein {text-decoration: none; font-weight: bold-color: white-padding: 8px; background-color: blue-border: 1px blau Fest border-radius: 16px; }Die letzte Zeile macht die Ecken der Tasten abgerundet. Es funktioniert nicht auf einigen anderen Browsern (einschließlich Netsurf auf dem Raspberry Pi), aber Browser, die es nicht verstehen es einfach nicht und zeigt normale quadratische Ecken statt, so ist es sicher, es zu schließen. Online können Sie Abhilfen finden Sie verwenden können, um abgerundete Ecken auf mehr Browsern funktionieren.
Sie haben nun eine Arbeitsnavigationsleiste aus einer Liste erstellt. Sie könnten jedoch feststellen, dass es mit dem Rest Ihrer Inhalte ausgekleidet ist nicht, und es ist etwas eingerückt. Das ist, weil eine Liste einige Polsterung es hat in der Regel, so müssen Sie das zu entfernen. Hier ist wie:
.nav ul {padding: 0px; }