Come creare una barra di navigazione da un elenco sul Raspberry Pi

11/01/2016 by admin

Nella parte superiore di una pagina web è una lista di link. Si desidera utilizzare il Raspberry Pi per trasformarli in una barra di navigazione, una serie di pulsanti orizzontali. Ma si vuole solo fare questa lista una barra di navigazione; si dona € t vuole influenzare altri collegamenti o elenchi nella pagina.

Il primo passo è quello di aggiungere <div> per il file HTML per contrassegnare dove inizia barra di navigazione e finisce, come questo:

<Div class = "nav">
<Ul>
<Li> <a HREF="index.html"> Casa </a> </ li>
<Li> <a href="galleries.html"> Gallerie </a> </ li>
<Li> <a href="tips.html"> Trucchi di fotografia </a> </ li>
<Li> <a href="contact.html"> Contatto </a> </ li>
</ Ul>
</ Div>

Youâ € ll vedere il nome della classe nav per la barra di navigazione, quindi nel file CSS, aggiungere la seguente riga, che rende gli elementi della lista appaiono fianco a fianco, invece di iniziare una nuova linea per ciascuno di essi:

.nav ul li {display: inline; }

Ora è possibile lo stile dei collegamenti all'interno della classe nav in modo da apparire come i tasti. Ciò significa che solo spegnendo la sottolineatura sul testo del link, rendendo il testo in grassetto, con un colore chiaro su uno sfondo scuro (Wea € ve scelto bianco su blu), e l'aggiunta di un po 'imbottitura per rendere il collegamento apparire più grande, come un pulsante . Il codice CSS è necessario Hereâ € s:

.nav a {text-decoration: none;
font-weight: bold;
Colore: bianco;
padding: 8px;
background-color: blue;
border: 1px blu solido;
border-radius: 16px; }

L'ultima riga rende gli angoli dei pulsanti arrotondati. Si doesnâ lavoro t € su alcuni altri browser (compresi Netsurf sul Raspberry Pi), ma i browser che Dona € t capire semplicemente ignorare e mostrare normali angoli quadrati, invece, in modo sicuro ita includerlo € s. Online è possibile trovare soluzioni alternative che è possibile utilizzare per rendere gli angoli arrotondati lavorare su più browser.

Si dispone ora di una barra di navigazione che lavora creato da un elenco. Si potrebbe notare, tuttavia, che itâ € s non allineati con il resto del contenuto, e ita € s un po 'rientrato. Thatâ € s perché una lista ha qualche chilo in su di esso di solito, quindi è necessario rimuovere tale. Hereâ € s come:

.nav ul {padding: 0px; }


Articoli Correlati