September 13
A prima vista, la lista delle tag HTML non sembrano eccitante. Il loro scopo originale era quello di creare elenchi puntati o numerati. Quando Cascading Style Sheets (CSS) divenne prevalente, gli sviluppatori esperti hanno iniziato la pubblicazione di articoli su come trasformare queste liste in menu complicati, e programmatori in concorrenza tra loro per inventare nuove tecniche. Ora gli sviluppatori utilizzare gli elenchi tag per strutturare qualsiasi elenco di contenuti, compresi i collegamenti all'interno dei menu. Hanno poi usare i CSS per lo stile delle liste. Con una conoscenza di CSS po 'e un po' di sperimentazione, è possibile replicare alcune delle loro tecniche.
1 Utilizzare questo codice CSS per modificare come una lista non ordinata mostra sulle pagine:
ul {
list-style: disc;
background-color: colorname;
}
Sostituire "ul" con "OL" per modificare un elenco ordinato invece. Change "colorname" con il nome di un colore web-safe o il valore esadecimale di qualsiasi colore. Ogni linea tra le parentesi graffe è una proprietà e il suo ambiente. Includere solo le proprietà che si desidera modificare.
2 Utilizzare il seguente codice CSS per modificare la modalità di display di testo all'interno dei tag <li>:
li {
font-family: "Nome del carattere";
colore: colorname;
background-color: colorname;
font-style: italic;
font-weight: bold;
}
Sostituire "Nome del font" con il nome di un tipo di carattere che si desidera utilizzare e sostituire "colorname" con il nome di un colore sicuro per il Web o il codice esadecimale per ogni colore.
3 Impostare la proprietà "list-style" a "nessuno" per il tag <ul> a spogliare proiettili. Rimuovere l'imbottitura e il margine sul lato sinistro del tag <ul> per sbarazzarsi di rientranze, a meno che non si desidera mantenere loro. Il codice è simile al seguente:
ul {
list-style: none;
padding-left: none;
margin-left: none;
}
4 Aggiungi elenco immagine, dando la <li> ogni uno sfondo e un po 'di imbottitura. Questo è il metodo più comune per la sostituzione regolari "a disco" pallottole di stile. Ecco il codice:
li {
background-image: URL (path / to / image.png) centro sinistra no-repeat;
padding-left: 20px;
}
Modificare il percorso tra le parentesi per il percorso del file di immagine. Utilizzare "centro-sinistra" per l'immagine di sfondo per il lato sinistro e dargli un allineamento verticale centrato. È inoltre possibile utilizzare "in alto a sinistra" per metterlo nell'angolo in alto a sinistra. Change "padding-left" per la quantità di pixel è necessario spostare il testo elemento della lista in modo che non si sovrapponga l'immagine proiettile.
5 Trasforma il tuo lista HTML in un menu verticale mettendo a nudo fuori padding di default, i margini e proiettili. Impostare ogni tag <li> a "float: left" Così l'articolo di visualizzazione di ciascuna side-by-side. Dare imbottitura ai tag <a> per renderli più facili da cliccare. Usa il codice in questo modo:
ul {padding-left: none; padding-right: none; list-style: none; }
li {float: left; }
li a {padding: 10px; }
Stile del tag <ul> per dare il menu di sfondo e quindi lo stile dei tag <a> con effetti al passaggio del mouse e così via per creare un menu di funzionamento.