L'unica differenza è che questo tag è fatto esclusivamente per gli elenchi di numerazione. Il nome del tag deriva dall'abbreviazione inglese "Ordered List" - elenco numerato.
Sintassi dei tag
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
- ...
Dove l'attributo type = "value" può assumere i seguenti valori
- A - imposta marcatori sotto forma di lettere latine maiuscole (A, B, C ..);
- a - imposta marcatori sotto forma di lettere latine minuscole (a, b, c ..);
- I - imposta marcatori sotto forma di grandi numeri romani (I, II, III, IV ..);
- i - specifica i marcatori sotto forma di piccoli numeri romani (i, ii, iii, iv ..);
- 1 (predefinito) - specifica i marcatori sotto forma di numeri arabi (1, 2, 3 ..);
L'attributo start = "value" imposta il valore iniziale (valore iniziale) del report.
L'attributo invertito specifica un conteggio inverso (se necessario).
Etichetta
- richiede l'uso obbligatorio di un tag finale
Un tag accoppiato viene utilizzato per formare elementi dell'elenco
Nota
All'interno dell'elenco, puoi modificare l'account con il tuo. Per questo, c'è un valore di attributo speciale = "" per il tag
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Esempi con elenchi numerati in html ( )
Esempio 1. Elenco html numerato sotto forma di lettere latine
Esempio con lettere maiuscole
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Esempio con lettere minuscole
- Articolo n. 10
- Articolo n. 11
- Articolo n. 12
Ecco come appare sulla pagina:
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Esempio 2. Elenco html numerato in lettere romane
Esempio con lettere maiuscole
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Ecco come appare sulla pagina:
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Esempio con lettere minuscole
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Ecco come appare sulla pagina:
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Esempio 3. Elenco html numerato con diverse posizioni di partenza
Un esempio che mostra le capacità dell'attributo start, che consente di impostare il valore iniziale del contatore.
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Ecco come appare sulla pagina:
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
Esempio 4. Modifica dell'account negli elenchi html numerati
Di seguito è riportato un esempio con la possibilità di modificare i valori del contatore utilizzando l'attributo value durante la visualizzazione di nuovi elementi nei tag
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
- Articolo n. 4
Ecco come appare sulla pagina:
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
- Articolo n. 4
Esempio 5. Elenco numerato reversibile in html
Di seguito è riportato un esempio di elenco numerato inverso (contando in ordine inverso).
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
- Articolo n. 4
Ecco come appare sulla pagina:
- Articolo # 1
- Articolo n. 2
- Articolo n. 3
- Articolo n. 4
Compito
Visualizza un elenco puntato orizzontalmente senza punti elenco.
Soluzione
Tag elenco puntato
- per impostazione predefinita emette elementi
- verticalmente uno sopra l'altro. Per creare elementi di navigazione, in alcuni casi, è conveniente visualizzare l'elenco in orizzontale. Esistono diversi modi per ottenere questa visualizzazione dell'elenco.
Dovresti già sapere che l'HTML contiene elementi di blocco e in linea. Gli elementi in linea non creano i propri blocchi, esempi di tali elementi sono tag o ... Gli elementi del blocco vengono visualizzati su una nuova riga e creano un blocco rettangolare, un esempio di tali tag
oQuindi, il tag
- è anche un elemento di blocco.
Taggare
- non si comporta come un elemento di blocco, puoi usare i CSS per renderlo in linea.
La proprietà display CSS è responsabile della modalità di visualizzazione dell'elemento nel documento. Consideriamo tre dei suoi valori (anche se ce ne sono di più):
- blocco - l'elemento viene visualizzato come blocco.
- inline - l'elemento viene visualizzato come inline.
- inline-block - elemento block-inline, leggi di più su questo tipo di elemento di seguito, lo useremo.
Innanzitutto, creiamo un elenco orizzontale convertendo i suoi elementi in elementi in linea. Nello stile CSS, scriveremo una regola in cui la proprietà display è impostata sul selettore li con il valore inline.
Elenca orizzontalmente Quindi, questo stile ha funzionato e ha ottenuto gli elementi dell'elenco orizzontalmente:
Figura 1. Opera dell'esempio n. 1.
Questo metodo presenta degli svantaggi. Questo perché gli elementi in linea hanno alcune limitazioni rispetto agli elementi di blocco. Ad esempio, non possono essere fornite la larghezza e l'altezza, ma quelle del blocco possono.
Ad esempio, vogliamo che l'elemento del menu che stiamo creando abbia una larghezza di 150 px e un'altezza di 40 px. Proviamo a cambiare lo stile come segue, ovvero aggiungiamo due regole impostando la dimensione della voce di menu:
Queste modifiche non comporteranno alcun cambiamento. Affinché le voci di menu siano posizionate orizzontalmente e sia possibile impostarne la larghezza e l'altezza, è necessario impostarle sul tipo di blocco in linea. Cambiamo il codice del nostro esempio:
Elenca orizzontalmente Questo codice funziona e le modifiche sono visibili:
Figura 2. Opera dell'esempio n. 2. Ma potrebbero esserci diverse opzioni, ad esempio, dobbiamo visualizzare gli elenchi nidificati nel menu:
Elenco annidato. Ecco l'output di questo codice:
Figura 3. Opera dell'esempio №3. Vediamo che i blocchi non sono allineati in altezza come vorremmo. Naturalmente, puoi specificare la stessa altezza per tutti i blocchi, ma non sempre conosciamo il suo valore esatto in anticipo e può cambiare.
Ma in realtà, perché sta succedendo questo?
I nostri blocchi hanno una proprietà di visualizzazione impostata su inline-block. Ciò significa che hanno le qualità di entrambi gli elementi di blocco (la capacità di specificare la larghezza e l'altezza) e gli elementi in linea. Quello che stiamo vedendo è la qualità degli elementi in linea.
Diamo un'occhiata a una stringa con caratteri "A" di diverse dimensioni:
A A A A A A A
Possiamo vedere che tutte le lettere sono allineate verticalmente con la linea di fondo. Più precisamente, lungo la linea di base, ma ora non entreremo nella giungla. Quindi, la stessa cosa è successa con i nostri blocchi.
La proprietà vertical-align viene utilizzata per allineare il testo verticalmente. Nel nostro esempio n. 3, vogliamo usare il valore top, che allineerà il bordo superiore dell'elemento alla parte superiore dell'elemento più alto nella riga.
Per ora, applichiamolo a una stringa con caratteri "A" di diverse dimensioni:
A A A A A A A
Sembra che le lettere "saltino" un po'. Ho impostato il bordo CSS sulla lettera più alta in modo che tu possa vedere che in realtà non c'è alcun salto, c'è uno spazio vuoto tra il bordo superiore (lungo il quale si verifica l'allineamento) e il punto superiore del carattere "A".
La proprietà vertical-align deve essere applicata a ogni elemento in linea, non è ereditata. Puoi leggere di più su questa proprietà: vertical-align.
Dopo questa digressione, continueremo a disporre gli elementi dell'elenco orizzontalmente.
Secondo modo
Puoi posizionare gli elementi dell'elenco orizzontalmente utilizzando la proprietà float. Questa proprietà indica da che parte è allineato l'elemento, ha due posizioni: sinistra e destra.
Ecco un esempio utilizzando questo codice:
Elenca orizzontalmente Ecco l'output del codice:
Figura 4. Lavoro dell'esempio. L'esempio sembra funzionare. Ma c'è un avvertimento nell'usare questa proprietà. Lo esamineremo ora. Ad esempio, prendiamo un codice in cui ci sono due elenchi orizzontali con modi diversi di disporre gli elementi in orizzontale: display e float:
Elenca orizzontalmente Ecco l'output del codice:
Figura 5. Lavoro dell'esempio. In questi esempi, l'elenco contenitori
- avere un bordo rosso di 1 pixel. Ma l'elenco in alto, che utilizza la proprietà display, include gli elementi dell'elenco. Ma gli elementi dell'elenco creati utilizzando la proprietà float cadono dal loro contenitore.
- sono ancora fuori dal contenitore
-
.
- nel luogo dove si incontra
- , il browser aggiunge automaticamente un'interruzione di riga;
- l'elenco ha rientri superiore e inferiore;
- gli indicatori vengono visualizzati come un cerchio pieno per impostazione predefinita;
- ogni elemento della lista viene spostato a destra rispetto al testo principale.
- disco - marcatori sotto forma di un cerchio pieno;
- cerchio - marcatori sotto forma di un cerchio aperto;
- quadrato - marcatori quadrati.
- sepulki
- sepulcaria
- sepuleni
- non funzionerà, quindi devi aggirarlo. Per fare ciò, nascondi gli indicatori di elenco utilizzando la proprietà di stile elenco con un valore nessuno e nel testo prima del contenuto.
- aggiungi il nostro simbolo usando lo pseudo-elemento :: before. Nell'esempio 2, il triangolo è usato come tale marcatore.
Esempio 2. Utilizzo di :: prima
Elenchi - sepulki
- sepulcaria
- sepuleni
Il risultato di questo esempio è mostrato in Fig. 2. Poiché l'utilizzo della proprietà stile elenco con un valore none non rimuove affatto i marcatori, ma li nasconde solo alla vista, l'elenco viene spostato a destra. Per eliminare questa funzionalità, l'esempio aggiunge una proprietà di rientro del testo negativo. Il suo compito è spostare il testo a sinistra di un carattere.
Riso. 2. Marker arbitrari nell'elenco
Il carattere non deve essere in formato esadecimale, può essere inserito direttamente nel testo. La cosa principale è salvare il documento nella codifica UTF-8 e che l'editor lo supporti. I simboli stessi e i loro codici possono essere presi, ad esempio, da LibreOffice Writer (Fig. 3).
Riso. 3. Selezione di un simbolo in LibreOffice
Elenco con pennarelli disegnati a mano
Gli stili ti consentono di impostare qualsiasi immagine adatta come marcatore tramite la proprietà list-style-image. Il valore è un percorso relativo o assoluto al file grafico, come mostrato nell'esempio 3.
Esempio 3. Utilizzo di un'immagine come marker
Elenchi - sepulki
- sepulcaria
- sepuleni
È meglio scegliere una cifra piccola per non trasformare gli elementi dell'elenco in didascalie. Nella fig. 4 mostra il risultato dell'esempio di utilizzo di piccole immagini come indicatori.
Riso. 4. Disegnare come pennarello
L'utilizzo di list-style-image presenta alcuni svantaggi:
- il disegno non può essere spostato in alto o in basso;
- in browser diversi, la posizione dell'immagine rispetto al testo potrebbe differire.
Ciò può essere evitato utilizzando la proprietà background, che imposta l'immagine di sfondo. Per ogni voce di elenco
- rimuoviamo i marcatori originali e impostiamo l'immagine di sfondo senza ripetere. E in modo che il testo non appaia sopra l'immagine, lo spostiamo a destra attraverso il riempimento a sinistra (esempio 4).
Esempio 4. Utilizzo dello sfondo
Ul (margin-left: -1em;) li (list-style: nessuno; background: url (images / bullet.png) no-repeat 0 2px; padding-left: 20px;)
Posizione del testo e dell'indicatore
Esistono due modi per posizionare il marker rispetto al testo: il marker viene spostato al di fuori del bordo degli elementi dell'elenco o avvolto attorno al testo (Fig. 5).
dentro fuori Riso. 5. Posizionamento dei marker rispetto al testo
La proprietà list-style-position viene utilizzata per controllare la posizione degli indicatori. Ha due significati: esterno - i marker sono posizionati all'esterno del blocco di testo (questa è l'impostazione predefinita) e inside - i marker fanno parte del blocco di testo e vengono visualizzati nella voce dell'elenco (esempio 5).
Esempio 5. Modifica della posizione dei marker
Elenchi - Si prega di controllare l'attrezzatura inclusa con il kit 3BM prima di iniziare il lavoro.
- In assenza di una o più periferiche è necessario contattare immediatamente il personale tecnico del VC.
- Dopo l'ispezione visiva dell'area di lavoro, è possibile accendere con cautela il 3BM.
Il risultato di questo esempio è mostrato in Fig. 6.
Buona giornata!
In questo articolo imparerai tutte le possibilità degli elenchi, capirai come creare un elenco numerato, padroneggi i tag che ti aiuteranno a rendere un semplice elenco puntato più interessante e evidente con punti elenco arbitrari. Dopo aver completato la lezione, capirai dove vengono utilizzati gli elenchi e in quali circostanze possono essere utilizzati.
Questo articolo è il terzo di questo breve tutorial sull'HTML di base. Prima di leggere questa lezione, ti consiglio di ripassare le due precedenti:
L'articolo è appena iniziato e potresti già notare l'uso di un elenco puntato standard. Sul mio sito web, sembra abbastanza semplice: a sinistra c'è un piccolo rientro con una linea e un pennarello quadrato. Più avanti nell'articolo, daremo un'occhiata più da vicino a cosa sono i marcatori, come creare numeri e anche come creare il tuo pennarello.
In ogni parte dell'articolo, la creazione di determinate liste sarà accompagnata da dettagliate spiegazioni per l'inserimento di una particolare lista.
1. Elenchi puntati in HTML
Questo tipo di elenchi viene utilizzato per enumerare un insieme di elementi di significato simile nel testo. Può essere un elenco di collegamenti correlati allo stesso argomento, una spiegazione dettagliata per singole parti del testo. Ma vediamo come appaiono gli elenchi puntati nel codice:
Ed ecco come appare nel browser:
Riso. 1.1. Visualizzazione standard dell'elenco puntato HTML non ordinato nel browser1.1 Punti elenco standard per elenchi puntati
Nell'immagine sopra (Fig 1.1.), puoi vedere i cerchi all'inizio di ogni voce di menu. Questo è il marcatore. Per impostazione predefinita, è un cerchio pieno nel browser. Esistono diversi tipi di marcatori in HTML: cerchio pieno, cerchio vuoto e quadrato. Non richiedono CSS o immagini di terze parti:
1.2 Indicatore elenco come un cerchio vuoto
Conosci i valori degli attributi, ma ora vediamo come creare un elenco puntato HTML nel codice. Dalla tabella sopra, abbiamo selezionato il secondo valore "cerchio" per l'attributo type e lo abbiamo assegnato al nostro elenco puntato:
<html> <testa> <titolo> Un esempio di elenco puntato con un indicatore di cerchio vuoto</ titolo> </ testa> <corpo> <p> Stelle:</ p> <ul type = "cerchio"> <li> Sirius</ li> <li> Arturo</ li> <li> Polluce</ li> <li> Betelgeuse</ li> <li> Il Sole</ li> </ul> </ corpo> </ html> Vediamo come apparirà questo codice nel browser:
Riso. 1.2. Visualizzazione puntata per un elenco sotto forma di cerchio nel browser1.3 Segnalibro a forma di quadrato
Vediamo anche l'ultimo esempio con un punto elenco quadrato per l'elenco HTML:
Notare il marcatore, è diventato quadrato:
Riso. 1.3. Marcatore per una casella di riepilogo come un quadrato in un browserNota importante: questo non è più utilizzato per definire gli elenchi puntati. C'è una chiara separazione tra CSS (leggi cos'è CSS) e HTML. L'HTML è per il markup e il CSS è per il bell'aspetto.
Il codice che contiene questo attributo, quando si specifica il tipo del documento corrente come HTML5 (""), darà un errore durante la convalida. Se non hai sentito cos'è la convalida, dovresti andare qui -.
L'errore sarà il seguente:
Riso. 1.4. Errore sul validatore quando si utilizza l'attributo "tipo" della listaAbbiamo scoperto gli elenchi puntati. Passiamo ora agli elenchi numerati, quindi esamineremo gli elenchi nidificati e alcuni esempi già pronti che vengono utilizzati più spesso su siti reali.
2. Elenchi numerati in HTML
A differenza del tipo precedente di elenchi, gli elenchi numerati hanno una caratteristica importante: aggiungono automaticamente la numerazione. Ciò è utile quando è necessario numerare un elenco di grandi dimensioni. Ci vorrà molto tempo manualmente, ma puoi ancora perderti. Un elenco numerato viene specificato utilizzando un tag. Come appare in pratica:
Un esempio di elenco numerato:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <testa> <titolo> Esempio di un elenco numerato standard</ titolo> </ testa> <corpo> <p> Da uno a cinque:</ p> <ol> <li> Primo</ li> <li> Secondo</ li> <li> Terzo</ li> <li> Il quarto</ li> <li> Quinto</ li> </ ol> </ corpo> </ html> Ecco come appare un elenco numerato con le impostazioni predefinite nel browser:
Riso. 2.1. Elenco numerato in un browser con impostazioni standardCome il suo predecessore (elenco puntato), ha i propri stili per la visualizzazione dei numeri. La numerazione semplice non è l'unico tipo di punti elenco per un elenco numerato in HTML.
2.1 Punti elenco standard per un elenco numerato
Qui abbiamo una scelta non di tre tipi di marcatori, ma di cinque:
Nome marcatore Il valore dell'attributo "tipo" Esempio di elenco Indicatori di numeri arabi 1 - Badminton
- Baseball
Marcatori a forma di lettere latine minuscole un - Chomolungma
- Chogori
- Kanchenjunga
Pennarelli in forma di lettere latine maiuscole UN - Vertice precipitare
- Vicolo dei capricci
- Insano
Indicatori di numeri romani minuscoli io - mare delle Filippine
- Mar Arabico
- mare di corallo
Numeri romani maiuscoli io - rosso
- Verde
- Blu
2.2 Numerazione personalizzata nell'elenco HTML
Oltre al consueto output di un elenco numerato, possiamo anche iniziare la nostra numerazione da qualsiasi cifra. Per fare ciò, è necessario impostare l'attributo aggiuntivo "start". Questa numerazione funziona per tutti i tipi di elenchi puntati per elenchi numerati. Come appare in pratica:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <testa> <titolo> Numerazione casuale per un elenco numerato</ titolo> </ testa> <corpo> <p> Cominciamo a numerare da dodici:</ p> <ol type = "a" start = "12"> <li> Dodici</ li> <li> Tredici</ li> <li> Quattordici</ li> <li> Quindici</ li> <li> Sedici</ li> </ ol> </ corpo> </ html> Ecco come verrà visualizzato su un sito live:
Riso. 2.2. Numerazione da un numero arbitrario in un elenco numeratoNell'immagine sopra, abbiamo numerato l'elenco a partire da dodici, creando dei marcatori sotto forma di lettere latine minuscole. Ora, penso, sia diventato chiaro come utilizzare questi attributi nei tuoi progetti.
Per ora, passiamo agli elenchi HTML nidificati.
3. Come creare un elenco multilivello (nidificato) in HTML
Gli elenchi multilivello vengono utilizzati nel sito nella creazione del menu. Questo menu molto spesso ha l'aspetto di un menu a discesa (lezione attiva) o di un menu a discesa a sinistra oa destra. Tali menu consentono di memorizzare altre voci di menu in una forma compatta.
Usando i modelli di auto come esempio, costruiremo un elenco a più livelli in HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <testa> <titolo> Elenco puntato nidificato HTML</ titolo> </ testa> <corpo> <ul> <li> Citroen<ul> <li> Berlingo</ li> <li> do1</ li> <li> do2</ li> <li> C3 Picasso</ li> <li> C4 Grand Picasso</ li> </ul> </ li> <li> ANATRA</ li> <li> Toyota</ li> <li> Audi</ li> <li> Lexus</ li> </ul> </ corpo> </ html> Nota come appare un elenco a più livelli in un browser:
Riso. 3.1. Un esempio di elenco multilivello in HTMLAbbiamo creato un elenco multilivello utilizzando un puntato (tag
- ). L'elenco a più livelli con i modelli Citroen è arrivato con altri indicatori. L'elenco principale con punti elenco pieni e l'elenco di secondo livello con cerchi vuoti. Ma, ricorda, con l'attributo "type" possiamo sovrascrivere i marker (è meglio impostarli).
- Prima linea
- Il secondo
- L'ultimo elemento
- - cerchio pieno (predefinito);
- - cerchio aperto;
- - quadrato
- Un pennarello a forma di disco pieno
- Pennarello a forma di disco non verniciato
- Piazza
- Prima linea
- Secondo punto
- Terza riga
- - la numerazione sarà effettuata in numeri arabi ordinari (la stessa opzione sarà utilizzata di default, in assenza dell'attributo “Tipo”);
- - lettere maiuscole come numerazione;
- - minuscolo;
- - numeri romani maiuscoli;
- - numeri romani minuscoli;
- con numerazione in grandi numeri romani
- Numerazione in caratteri latini minuscoli
- Numeri romani piccoli
- Il primo elemento il cui numero è specificato nel tag OL dall'attributo start = "23"
- L'elemento successivo, con un numero uno più alto
- Uno ancora uno ancora
- Primo elemento con il numero uno
- Questo elemento riceverà il numero specificato nell'attributo value = "32"
- Articolo con un numero grande
- Primo punto
- Secondo
- Scorso
- Primo termine
- Descrizione
- Secondo termine
- La sua descrizione
- Il primo paragrafo della numerazione principale
- Secondo punto
- Il primo elemento dell'elenco puntato nidificato
- Secondo
- Il terzo e ultimo paragrafo etichettato
- Terzo articolo numerato
Ma possiamo combinare elenchi multilivello numerati e puntati in questo modo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <testa> <titolo> Elenchi numerati, puntati e numerati in HTML</ titolo> </ testa> <corpo> <ul> <li> Il primo gruppo di tulipani<ol> <li> Primo grado<ul> <li> Tulipani precoci semplici</ li> </ul> </ li> <li> Seconda classe<ul> <li> Tulipani doppi</ li> </ul> </ li> </ ol> </ li> </ul> </ corpo> </ html> Nell'esempio sopra, abbiamo un doppio annidamento (2 livelli). Per prima cosa, inseriamo un elenco di due classi di tulipani, lo abbiamo numerato. Quindi, un elenco puntato viene nidificato in ciascuno degli elementi nell'elenco numerato.
Guardiamo il suo aspetto nel browser:
Riso. 3.2. Un esempio di un elenco numerato multilivello in un elenco puntato in un browser4. Risorse utili per gli elenchi HTML
Contiene informazioni che richiedono la comprensione delle proprietà CSS. Per fare questo, ti consiglio di studiare le seguenti lezioni:. Tutti gli esempi saranno immediatamente con il codice sorgente e suddivisi nelle schede HTML (struttura), CSS (stili) e Risultato (risultato).
4.1 Come trasformare un elenco HTML in una stringa
Potrebbe essere necessario trasformare l'elenco HTML in una stringa durante la creazione di un menu orizzontale. È molto semplice realizzarlo:
4.2 Come creare un elenco HTML senza un'icona
La proprietà list-style-type in CSS è responsabile di questo (maggiori dettagli):
4.3 Come creare un elenco in HTML centrato
Un elemento dell'elenco è un elemento di blocco, quindi deve essere centrato utilizzando il padding. Ma c'è un punto importante: dobbiamo specificare esplicitamente la larghezza affinché l'allineamento funzioni:
4.4 Come creare un elenco in HTML con immagini
È sufficiente solo una proprietà CSS list-style-image. All'interno dell'URL, specificare l'indirizzo prima dell'icona. Voglio solo notare che è meglio selezionare subito una piccola immagine, perché l'altezza della riga dell'elenco dipende da essa:
4.5 Elenco puntato HTML Il tuo marcatore
In questo caso, è necessario collegare preventivamente le icone dei caratteri (ad esempio FontAwesome). Quindi puoi creare qualsiasi icona invece del marcatore standard:
4.6 Come creare un elenco in HTML con più colonne
Per creare un elenco a più colonne utilizzeremo la proprietà CSS Column-count (questa proprietà è supportata solo nei seguenti browser: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). È inoltre necessario impostare l'altezza dell'elenco per visualizzare la suddivisione in più colonne:
5. Pratica di lavorare con le liste
Nel video qui sotto, puoi vedere tutto il lavoro con gli elenchi HTML in pratica:
Ciao cari lettori del sito blog. Oggi, all'interno di questa rubrica, voglio parlare di una varietà di elenchi Html che possono essere creati sulla base di tag appositamente progettati UL, OL, LI e DL. Con l'aiuto della coppia UL e LI, vengono creati elenchi puntati, con l'aiuto di OL e LI - numerati e con l'aiuto degli elementi DL, DT e DD, vengono creati i cosiddetti elenchi di definizioni. Esamineremo anche brevemente i principi della creazione di strutture nidificate.
Voglio ricordarti che siamo già riusciti, siamo riusciti a parlare delle basi del moderno, così come del layout della tabella (). Inoltre, abbiamo toccato le basi, beh, abbiamo imparato.
Elenchi puntati basati su tag UL e LI
Il tag UL viene utilizzato per creare elenchi puntati e OL viene utilizzato per creare elenchi numerati. Questi tag sono accoppiati e bloccati, proprio come l'elemento LI.
Elementi di elenco separati si trovano tra i tag di apertura e chiusura, che a loro volta sono racchiusi in un elemento LI di apertura e chiusura. Nella parte superiore e inferiore degli elenchi Html, il browser aggiunge un rientro di una riga, simile al rientro creato da un tag di paragrafo.
Vediamo, ad esempio, una variante puntata che potrebbe assomigliare a questa:
All'interno dei tag UL di apertura e chiusura possono esserci solo elementi LI, e già all'interno di questi elementi (item) è possibile inserire qualsiasi contenuto (testo, immagini, titoli, paragrafi, collegamenti e anche altri elenchi).
Quelli. UL serve solo per organizzare un elenco puntato (non ordinato) e tutto ciò che vedrai in una pagina web al suo interno viene implementato utilizzando il contenuto degli elementi LI.
Per UL, puoi cambiare il tipo di marcatore scrivendo valori diversi per l'attributo "Tipo" in esso. Se "Tipo" (controllo dell'aspetto dei marker) non è specificato per l'elemento UL, verrà visualizzato il tipo di marker predefinito (disco - un cerchio riempito con il colore del testo):
Negli esempi precedenti, abbiamo scritto l'attributo "Tipo" nell'elemento UL, applicando questo tipo di marcatori a tutti gli elementi. Ma l'attributo "Tipo" può essere assegnato a ogni singolo tag LI impostando il proprio tipo di marcatore per questo elemento.
Un esempio di un elenco puntato con diversi tipi di punti elenco per ogni elemento:
Elenchi numerati in HTML basati su tag OL
Per creare un elenco numerato, vengono utilizzati i tag OL, all'interno dei quali, ancora, verranno posizionati gli elementi LI. OL e LI, come ho già detto, sono block (cioè tendono ad occupare tutto lo spazio a loro disposizione in larghezza) e all'interno di OL non sarà possibile posizionare altro che elementi LI.
Si scopre che OL e UL sono tag di servizio necessari solo per dire al browser che tipo di elenco stiamo generando (puntato o numerato). Nel caso di uno numerato, a sinistra di ogni elemento vedremo non un marcatore, ma un numero e un punto dietro di esso:
Come accennato in precedenza, gli elementi UL, OL e LI hanno la capacità di utilizzare l'attributo TYPE. Ti consente di personalizzare il tipo di proiettile o di specificare quali numeri o lettere verranno numerati negli elementi nell'elenco. Per un elenco numerato, i parametri di questo attributo possono assumere i seguenti valori:
Un esempio di elenco numerato con diversi tipi di numerazione per ogni articolo:
Quando si creano elenchi numerati, è anche possibile iniziare la numerazione non da uno, ma dal numero specificato nell'attributo START. Ad esempio:
Per OL è anche possibile iniziare una nuova numerazione da qualsiasi valore, a partire da qualsiasi articolo, scrivendo l'attributo VALUE con il numero richiesto nell'apertura LI di questo articolo. Ad esempio:
Elenchi di stili in CSS (fogli di stile)
Ma, di regola, ora l'aspetto dei marcatori non viene impostato tramite l'attributo TYPE, ma per il quale vengono scritte le proprietà corrispondenti.
Qui darò solo un esempio di diversi elenchi puntati per elenchi non numerati, il cui aspetto è impostato tramite un file separato con fogli di stile a cascata.
Ma ne parleremo negli articoli successivi. Ecco come viene impostato l'aspetto dei marcatori UL su questo blog. Le immagini vengono utilizzate come indicatori: per gli elementi ordinari di un elenco non numerato -, per gli elementi nidificati di un elenco non numerato -.
Liste speciali e nidificate in codice Html
Il terzo e ultimo tipo è chiamato "liste di definizione" e vengono specificate utilizzando tre tag: DL, DT e DD. Il DL dice al browser che seguirà un elenco di definizioni.
Solitamente questo tipo viene utilizzato (beh, o si presume che verrà utilizzato) per scrivere voci di dizionario, costituite da termini (racchiusi in tag DT) e loro descrizioni (racchiuse in tag DD).
Se guardi l'esempio sopra, noterai che l'elemento DD (term description) è sfalsato (di 40 pixel) rispetto all'elemento DT (termine stesso).
In generale DL, DT e DD sono tag di blocco, inoltre all'interno di un elemento DT possono essere inseriti solo contenuti con tag inline (si scopre che all'interno di un DT non sarà possibile utilizzare intestazioni di blocco ed elementi di paragrafo). E all'interno dei tag DD, puoi inserire qualsiasi elemento, sia in linea che in blocco.
Elenco annidato in Html viene creato per analogia con uno semplice, ma all'interno dell'elenco principale, alcune voci sono nuovamente racchiuse nei tag UL o OL di apertura e chiusura.
Si ricorda che la LI di chiusura dell'articolo in cui verrà creato l'articolo nidificato viene posta solo dopo l'intero codice della lista nidificata (questo è molto importante per la sua corretta visualizzazione nella pagina web). L'elenco annidato potrebbe essere simile a questo:
Buona fortuna a te! A presto sulle pagine del sito blog
puoi guardare più video andando su
");">
Potresti essere interessato
Come inserire un collegamento e un'immagine (foto) in HTML - IMG e tag A 
Moduli HTML per il sito - tag Form, Input e Select, Option, Textarea, Label e altri per la creazione di elementi di moduli web Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda - Tag HTML del modulo a discesa e casella di testo 
Come vengono impostati i colori nel codice HTML e CSS, selezione delle sfumature RGB nelle tabelle, Yandex e altri programmi 
Incorpora e oggetto - Tag HTML per la visualizzazione di contenuti multimediali (video, flash, audio) su pagine web 
Tag e attributi delle intestazioni H1-H6, riga orizzontale Hr, interruzione di riga Br e paragrafo P secondo lo standard Html 4.01 
Tabelle in Html - Tag Table, Tr e Td, oltre a Colspan, Cellpadding, Cellspacing e Rowspan per crearle
Figura 7. Lavoro dell'esempio. Inoltre, nel nostro lavoro non sempre sappiamo quale elemento seguirà quello utilizzando float. L'ideale sarebbe chiudere la proprietà float nello stesso blocco in cui è aperta.
Questo viene fatto usando uno pseudo-elemento. Ecco il codice:
Elenca orizzontalmente Ora abbiamo un codice funzionante al 100%.
Figura 8. Esempio di esecuzione. Questa tecnica con la proprietà float viene solitamente utilizzata durante la codifica dei siti per allineare le colonne create dai tag
... In questo modo si ottiene la normale costruzione dei pilastri con l'allineamento in altezza richiesto. Quando creiamo un menu, quindi, nella maggior parte dei casi, l'altezza dei blocchi non è importante per noi, è quasi sempre la stessa. Pertanto, l'uso della regola (display: inline-block) è abbastanza ragionevole in questi casi.Ma per completezza della divulgazione dell'argomento, abbiamo familiarizzato con tutte le possibili opzioni qui. Sebbene possano esistere altri modi, ad esempio utilizzando le tabelle CSS, i motori di ricerca consigliano vivamente di utilizzare le tabelle solo per lo scopo previsto e non per organizzare gli elementi di navigazione o altro.
Gli elenchi puntati consentono di suddividere il testo di grandi dimensioni in blocchi separati, ognuno dei quali inizia con un punto elenco, di solito un piccolo punto. Ciò attira l'attenzione del lettore sul testo e ne aumenta la leggibilità.
Con elemento
- sono associate le seguenti caratteristiche:
La Figura 1 mostra il risultato di un esempio che illustra le caratteristiche di cui sopra di un elenco puntato.
Riso. 1. Visualizzazione dell'elenco puntato
Tipo di marcatore
I marker possono essere di tre tipi: cerchio pieno (predefinito), cerchio aperto e quadrato. Per selezionare il tipo di marker, utilizzare la proprietà list-style-type o lo stile elenco universale (esempio 1). Si applicano i seguenti valori:
Esempio 1. Modifica dell'aspetto di un marker
Elenchi L'esempio mostra come creare un elenco puntato utilizzando un quadratino pieno come icona del punto elenco. Sebbene il numero di valori sia limitato a tre, ciò non significa che abbiamo solo tre tipi di marker a nostra disposizione. Ci sono molti caratteri speciali che possono fungere con successo da un'icona marcatore. "Avvitarli" direttamente a
- nel luogo dove si incontra
Allo stesso tempo, a prima vista, tutto funziona. Ma scambiamoci le nostre liste. Mettiamo la lista con la classe menu-1 nel codice prima della lista con la classe menu-2 (ora è sotto).
Questo è ciò che otteniamo come risultato:
Figura 6. Operazione di esempio. Gli elementi del menu in basso scorrono anche nella parte superiore del menu, perché l'effetto della proprietà float non è stato annullato e si applica a tutti gli elementi successivi.
Come risolvere questo problema?
Per fare ciò, è necessario utilizzare la proprietà clear, annulla il flusso dell'elemento attorno a un altro elemento, se questo ha la proprietà float impostata.
Ecco un esempio modificato utilizzando la proprietà clear:
Elenca orizzontalmente Si può vedere che l'elenco inferiore non aderisce più a quello superiore, gli elementi non si sovrappongono. Ma nella prima lista i tag
- è anche un elemento di blocco.
