Gli sviluppatori Web front-end utilizzano elenchi non ordinati per fornire la struttura per tutta una serie di diversi Web pagina trucchi ed effetti che vanno dal semplice proiettile elenchi complicati menu a tendina e Slider di immagini. Eventuali aspiranti Web designer o sviluppatore dovrebbe imparare le basi di styling elenchi non ordinati utilizzando il codice CSS. Per creare un elenco di elementi dritto, orizzontale in CSS, ad esempio, è necessario sapere come assegnare galleggianti, spaziatura e margini.

Istruzioni

1

Digitare il testo per la vostra lista non ordinata nel file HTML della tua pagina Web. Mettere ogni voce dell'elenco sulla propria riga per facilitare la lettura e modifica del codice. Avvolgere ogni voce di elenco in apertura e chiusura tag < li >. È necessario chiudere sempre questi tag per lo styling più facile e più tardi di editing. Qui è un elemento di elenco di esempio:

< li > questo è qualche testo che compone una lista item. </li >

2

Aggiungere una nuova riga sopra gli elementi dell'elenco e digitare il tag < ul > ci. Aggiungere una nuova riga sotto l'elenco e digitare il tag di chiusura </UL >. All'interno del tag < ul >, impostare l'attributo ID su un nome univoco e significativo. Si utilizzerà tale ID nel codice CSS. Ecco un esempio del tag < ul > in uso:

< ul id = "dritto" >

< li > voce di elenco 1 </li >

< li > voce di elenco 2 </li >

</UL >

3

Apri il. File per il tuo sito CSS o aggiungere di apertura e chiusura tag < style > tra i tag < head > del file HTML. Digitare il codice CSS nella. File CSS o tra i tag < style >. Impostare la proprietà di "galleggiare" i tag < li > a "sinistra" così ogni voce dell'elenco galleggerà contro il bordo sinistro di uno degli ultimi. Ecco il codice CSS:

dritto li {float: left;}

Si noti che "#straight" Seleziona i tag < li > all'interno di qualsiasi tag specificato un ID di "dritto".

4

Aggiungere margini e spaziatura interna per i tag < li > in CSS di spazio ciascuna voce di elenco, in questo modo:

dritto li {galleggiante: sinistra; margin-right: 10px; margine sinistro: 10px; padding: 5px;}

Stile il < li > Tag tuttavia volete, dando le voci i propri sfondi, colori del testo e gli stili dei caratteri secondo necessità. È inoltre possibile rimuovere i punti elenco di impostazione "list-style" su "none".

Consigli & Avvertenze

• Quando si crea un elenco di dritto, non ordinato per uso come un menu su pagine Web, aggiungere spaziatura interna ai tag < a > per renderli più facili da scegliere. Tutti l'imbottitura intorno il link diventerà cliccabile.
• Sempre eseguire il backup i file HTML e CSS durante la modifica di pagine Web.