HTML e CSS Codice in una barra di navigazione con un angolo arrotondato

September 6

HTML e CSS Codice in una barra di navigazione con un angolo arrotondato


HTML fornisce la struttura per i dati all'interno di pagine Web. A seguito di questo principio, la maggior parte degli sviluppatori Web di creare barre di navigazione a partire da liste non ordinate. Una lista non ordinata crea un elenco puntato per impostazione predefinita in tutti i browser Web, ma è possibile utilizzare i fogli di stile di codice (CSS) in seguito a spogliare i proiettili e voci di elenco stile, se necessario.

L'elenco non ordinato

Ecco il codice per una lista non ordinata di base che diventerà una barra di navigazione:

<Ul>

<Li> <a href="somepage.html"> qualche pagina </a> </ li>

<Li> <a href="anotherpage.html"> Un'altra pagina </a> </ li>

</ Ul>

Si noti che ogni elemento della lista - creato dal tag "<ul>" - è avvolto in una voce di elenco o "<li>" coppia di tag. Dal momento che i visitatori del sito hanno bisogno di cliccare sugli oggetti nella lista, è necessario utilizzare il tag di ancoraggio per creare link su ogni voce dell'elenco.

Rimuovere Styling predefinito

Prima di poter stile una lista non ordinata in una barra di navigazione, è necessario spogliare stili predefiniti. Se si utilizza un foglio di stile reset, come quello creato da Eric Meyers, è possibile saltare questo passaggio. Spogliarello via styling di default richiede l'impostazione della proprietà "list-style" a "none" per rimuovere i proiettili, e quindi è necessario rimuovere sia il margine sinistro e imbottitura sinistra. Il codice CSS è simile al seguente:

ul {

list-style: none;

margin-left: 0;

padding-left: 0;

}

Fare l'elenco orizzontale

Anche se alcuni siti web utilizzano i menu della barra laterale per la navigazione, la più comune orientamento barra di navigazione è orizzontale, si estende attraverso la parte superiore del sito. Potete fare la vostra lista non ordinata orizzontale impostando le voci di elenco di "float: left" in questo modo:

li {

float: left;

}

Navigation Links

Dare ogni collegamento un tipo di visualizzazione di "blocco" è il modo migliore per rendere la vostra barra di navigazione facile da usare. Senza "display: block", non è possibile aggiungere imbottitura ai link che aggiungono spazio cliccabile intorno al loro testo. L'imbottitura rende anche oggetto barra di navigazione evidenziando più facile. Questo è un esempio di codice CSS per i collegamenti in una barra di navigazione:

li a {

blocco di visualizzazione;

padding: 10px;

background-color: # 555555;

colore: #FFFFFF;

text-decoration: none;

}

li a: hover {

background-color: # 333333;

}

Il codice precedente aggiunge 10 pixel di padding intorno a ogni collegamento. I collegamenti ottenere un colore di sfondo di grigio medio e un colore del testo bianco. "Text-decoration: none" si spegne collegamento sottolineatura. Il "li a: hover" regole di stile del selettore fanno in modo che quando l'utente posiziona il puntatore del mouse su un collegamento, lo sfondo diventa un grigio più scuro.

Styling la barra stessa

Potete dare il vostro barra di navigazione qualsiasi stile che si desidera, con sfondi, sfumature, ombre e gli angoli arrotondati. Assicurati che il tuo stile funziona in tutti i browser, a meno che non va bene per il progetto particolare per consentire la barra a degradare con grazia. Ad esempio, ecco il codice per un bar con uno sfondo nero e angoli arrotondati:

ul {

background: # 000000;

border-radius: 20px;

}

La proprietà "border-radius" non funziona in Internet Explorer 8 e al di sotto senza l'uso di un polyfill come "CSS3Pie." Un foglio di stile separato avvolto in commenti condizionali, insieme ad immagini d'angolo, in grado di creare un ripiego per l'angolo arrotondato pure.