Compito
Visualizza un elenco puntato orizzontalmente senza punti elenco.
Soluzione
Etichetta dell'elenco puntato
Dovresti già sapere che l'HTML ha elementi block e inline. Gli elementi in linea non creano i propri blocchi, un esempio di tali elementi sono i tag o . Gli elementi del blocco vengono visualizzati su una nuova riga e creano un blocco rettangolare, un esempio di tali tag Quindi, etichetta Taggare Responsabile di come l'elemento verrà visualizzato nel documento Proprietà CSS Schermo. Considera tre dei suoi valori (anche se ce ne sono altri): Innanzitutto, creiamo un elenco orizzontale trasformando i punti elenco in elementi in linea. IN stile CSS Scriviamo una regola in cui il selettore li è impostato sulla proprietà display con il valore inline .
Quindi, questo stile ha funzionato e ha ottenuto la disposizione orizzontale degli elementi dell'elenco: Figura 1. Esempio di lavoro n. 1. Questo metodo ha degli svantaggi. La questione è che gli elementi inline hanno alcune restrizioni, rispetto agli elementi block. Ad esempio, non possono essere assegnate una larghezza e un'altezza, ma quelle a blocchi sì. Ad esempio, vogliamo che l'elemento di menu che stiamo creando abbia una larghezza di 150px e un'altezza di 40px . Proviamo a cambiare lo stile nel modo seguente, ovvero, aggiungiamo due regole che impostano la dimensione della voce di menu:
Queste modifiche non comporteranno alcuna modifica. Affinché le voci di menu siano disposte orizzontalmente e per poter impostare la loro larghezza e altezza, devono essere impostate per digitare inline-block . Modifichiamo il nostro codice di esempio:
Questo codice funziona e le modifiche sono visibili: Ma potrebbero esserci diverse opzioni, ad esempio, dobbiamo visualizzare elenchi nidificati nel menu:
Ecco l'output di questo codice: Vediamo che i blocchi non sono allineati in altezza come vorremmo. Ovviamente puoi specificare la stessa altezza per tutti i blocchi, ma non sempre ne conosciamo il valore esatto in anticipo e può cambiare. E in realtà, perché sta succedendo questo? I nostri blocchi hanno una proprietà display di inline-block . Ciò significa che hanno qualità come elementi di blocco(la possibilità di specificare la larghezza e l'altezza) e gli elementi inline. Quello che stiamo vedendo è la qualità degli elementi inline. Consideriamo una stringa con caratteri "A" di diverse dimensioni: A A A A A A A Vediamo che tutte le lettere sono allineate verticalmente con la linea di fondo. Più precisamente, lungo la linea di base, ma ora non entreremo nella natura selvaggia. 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, useremmo top , che allineerà il bordo superiore dell'elemento alla parte superiore dell'elemento più alto nella riga. Per ora, applicalo a una stringa con caratteri "A" di dimensioni diverse: 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 ci sono salti, c'è uno spazio vuoto tra il bordo superiore (che è allineato) 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 orizzontalmente gli elementi della lista. Puoi posizionare gli elementi dell'elenco orizzontalmente usando la proprietà float. Questa proprietà specifica su quale lato è allineato l'elemento, ha due posizioni: left e right . Ecco un esempio che utilizza questo codice:
Ecco l'output del codice: L'esempio sembra funzionare. Ma c'è una sfumatura nell'uso di questa proprietà. Ora lo prenderemo in considerazione. Ad esempio, prendiamo un codice che ha due liste orizzontali con in un altro modo disporre gli elementi orizzontalmente: display e float :
Ecco l'output del codice: In questi esempi, i contenitori elenco Allo stesso tempo, a prima vista, tutto funziona. Ma scambiamo le nostre liste. Mettiamo la lista con la classe menu-1 nel codice prima della lista con la classe menu-2 (ora è più in basso). Ecco cosa otteniamo come risultato: Le voci di menu in basso si avvolgono anche nel menu in alto, perché nessuno ha annullato l'azione della proprietà float e si applica a tutti gli elementi successivi. Come risolvere questo problema? Per fare ciò, è necessario utilizzare la proprietà clear, annulla l'elemento di avvolgimento di un altro elemento se ha la proprietà float impostata. Ecco un esempio modificato utilizzando la proprietà clear:
Si può vedere che l'elenco inferiore non avvolge più quello superiore, gli elementi non si incontrano. Ma nel primo elenco di tag Inoltre, al lavoro, non sempre sappiamo quale elemento seguirà l'elemento usando float . L'ideale sarebbe chiudere il lavoro della proprietà float nello stesso blocco in cui è stata aperta. Questo viene fatto con uno pseudo elemento. Ecco il codice:
Ora abbiamo un codice funzionante al 100%. Questa tecnica con la proprietà float viene in genere utilizzata durante il layout dei siti per allineare le colonne create dai tag Ma per completezza di divulgazione dell'argomento, qui abbiamo conosciuto tutto opzioni possibili. Sebbene possano esserci altri modi, come l'utilizzo di tabelle CSS, i motori di ricerca consigliano vivamente di utilizzare le tabelle solo per lo scopo previsto e non per organizzare elementi di navigazione o altro. Gli elenchi sono numerati e non numerati. Gli elenchi numerati sono emessi dal codice:
Gli elenchi non ordinati vengono emessi dal codice:
Ogni elemento in qualsiasi elenco è racchiuso in un tag li. Tutti gli elementi dell'elenco sono racchiusi in un tag comune ul o ol. Gli stili di questi tag sono scritti nel foglio di stile. Per ogni tag vengono assegnati determinati stili di design. Indicano rientri dal testo. Per un elenco numerato, gli stili di numerazione sono prescritti per ogni elemento. I numeri arabi standard sono descritti dal valore decimale. tipo-stile-lista: decimale; /*numeri arabi*/ Per un elenco puntato, viene specificato lo stile del carattere: quadrati o cerchi. tipo-stile-lista: cerchio; /*tazze*/ Ad ogni voce di menu può essere assegnata un'immagine. list-style-image: url('percorso immagine'); Di solito, nei modelli, viene redatto un elenco numerato con numeri semplici e viene redatto un elenco non numerato con quadrati e cerchi neri. È noioso e inespressivo. Risolviamo questo problema. Apri il file style.css. Trova la sezione chiamata /* Elementi di testo */ Il codice standard è simile al seguente: Guarda questo simpatico design con elenco numerato. Come? Ripetiamo. Trova gli stili per il tag ol. Scrivi nuove proprietà su di esso. Ol ( riempimento: 0px 0 0 20px; margine: 0.5em 0 1.571em 1.9em; colore: #2E2E2E; tipo-stile elenco: nessuno; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; counter-reset: point; ) ol li ( margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relative; ) ol li:before ( margin-bottom: 4px; counter-increment: punto 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: #BDC3C7; content: counter(point); text-align: centro; posizione: assoluta; font-weight: grassetto; ) Per farti capire dove e cosa devi modificare per adattarlo al tuo progetto, smontiamo questo codice. tipo-stile-lista: nessuno; - disabilita l'output dei numeri standard before è uno pseudo elemento per il tag ol li. Ha i seguenti stili: Nei tuoi stili, puoi impostare qualsiasi colore, allineamento, dimensione del carattere e riempimento. Su un sito femminile ci sono elenchi numerati molto attraenti. Come viene implementato? Diamo un'occhiata al seguente codice: /*primo numero*/ ol li:first-child ( list-style-image: url(percorso dell'immagine con il numero 1); ) /*secondo numero*/ ol li:nth-child(2n) ( list-style- image: url(percorso dell'immagine con il numero 2); ) /*terzo numero*/ ol li:nth-child(3n) ( list-style-image: url(percorso dell'immagine con il numero 3); ) /*quarto numero */ ol li:nth-child(4n) ( list-style-image: url(percorso dell'immagine con il numero 4); ) /*Successivamente, scriviamo allo stesso modo solo per i seguenti numeri di elemento*/ Nel codice di un tale elenco numerato, è necessario elencare tutti i numeri degli articoli e assegnare a ciascuno di essi un'icona univoca. Se usi fino a 20 elementi numerati negli elenchi degli articoli, devi scrivere la pseudo-classe nth-child(An) 20 volte. In modo che la pseudo-classe nth-child(20n) arrivi per ultima negli stili. Trova nel file di stile le righe che descrivono il design dell'elenco numerato (o li tag). Aggiungi la pseudo-classe first-child ad essa. Copialo e incollalo una volta, quindi modifica questa proprietà in nth-child(An) e copia tanti numeri quanti dovrebbero avere la loro icona. Inserisci i numeri degli articoli. Per ogni numero, scrivi la proprietà list-style-image con la sua icona univoca. Se le icone sul sito si trovano lontano dai punti o si sovrappongono ad essi, è necessario modificare l'allineamento e i rientri delle icone digitali o il testo dei punti. Mi è piaciuto molto questo elenco puntato Ul ( padding: 11px 0 5px 0; ) ul li ( padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: #2E2E2E; line-height: 1.6; border-bottom: 1px tratteggiato #ccc; padding-bottom: 10px; ) ul li:before ( content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px 2px no-repeat; list-style-type: circle; ) ul li:nth-child(2n):before ( content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px -17px no-repeat; list-style-type: circle; ) Invece dello stile list-style-type standard, puoi assegnare la proprietà del percorso dell'icona - list-style-image: url . Ma poi devi impostare il rientro esterno sinistro dai bordi del sito: senza di esso, le icone non verranno visualizzate, andranno oltre la zona dell'area del contenuto. Per l'esperimento, puoi assegnare i rientri: Ul li( list-style-image: url(images/radio.png); margin-left: 30px; ) La rotazione dell'icona può essere impostata con la proprietà nth-child(An). L'esempio sopra usa lo pseudo-elemento before. Il codice ha una pseudo-classe nth-child(2n). Il suo valore è 2. Si scopre che ogni oggetto pari ha un'icona diversa. Se scrivi 2n+1 invece di 2n, un'altra icona cadrà sui punti dispari. È possibile specificare un carattere di sottolineatura per ogni elemento dell'elenco. Nell'esempio precedente, i paragrafi sono sottolineati con linee tratteggiate. Inoltre, a ciascun elemento possono essere assegnati frame, sfondi, icone. Basta non esagerare. Il nostro compito non è quello di sopraffare tutti con un design stravagante, ma migliorare la qualità della percezione dei contenuti. A volte è necessario ospitare più elenchi con stili diversi. Se assegni stili comuni, lo stesso design verrà assegnato a tutte le liste. Elenchi vari può essere visualizzato se assegni un id separato al tag ol o ul e lo scrivi nella modalità di modifica dell'articolo html. Bene, nel file di stile per questo id, devi registrare stili separati. Ad esempio, ecco una bella opzione di progettazione dei contenuti: In HTML, scrivi un elenco come questo:
In CSS, scrivi stili come questo: Ol#sod( padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline- block; ) ol#sod li() ol#sod li:before( font-weight:normal !important ) Il nuovo stile differisce da quello principale nel design del vecchio tag: sfondo, stile di visualizzazione, riga a sinistra del contenuto. Utilizzando diversi elenchi di diverso design nel testo, renderai la presentazione delle informazioni ancora più interessante. Quando si elencano elementi, è possibile impostare alcune icone e quando si elencano azioni, altre. Qui, il design è limitato solo dalla tua immaginazione. Questi metodi sono applicabili nella progettazione di voci di menu, intestazioni e qualsiasi altro elemento del sito. Come scriverli in codice HTML? Un pezzo di codice racchiude l'ancora del collegamento e l'altro è posizionato accanto al punto in cui dobbiamo essere reindirizzati quando si fa clic sul collegamento.
E nel testo dell'articolo devi scrivere così: Titolo 1... Titolo 2... Titolo 3... Forse i webmaster più esperti mi correggeranno in qualche modo. Sto solo suggerendo quello che ho provato io stesso. Se hai domande, sarò felice di vederle nei commenti. Ageeva Veronica. Potrebbero interessarti anche: Se hai mai provato a cambiare gli stili css dei numeri di riga (numeri) negli elenchi ordinati Ecco l'esempio più semplice di un elenco senza stile: Diamo un'occhiata a diversi modi per risolvere il problema di cui sopra. Il modo tradizionale per risolvere questo problema è nascondere i numeri di riga che vengono posizionati automaticamente dal browser. Questo usa la proprietà list-style: none; . D'accordo, sembra ridondante e non flessibile. Nascondiamo i numeri di sequenza posizionati automaticamente e li sostituiamo con valori specificati manualmente, intasiamo il layout, ecc. Vediamo come possiamo ottenere lo stesso risultato senza intasare il layout e utilizzando lo pseudo-element::before e le proprietà css content , counter-increment , counter-reset . Per prima cosa, forniremo il codice e la demo, quindi scopriremo cosa è cosa. Come puoi vedere, il codice html rimane pulito e bello. In questo caso, tutto lo stile degli elementi della lista viene trasferito in css. Analizziamolo punto per punto: ulteriori informazioni sui contatori css possono essere trovate in Nota: l'attributo invertito è supportato solo Browser Chrome e Safari. Inizio: imposta il valore intero iniziale da cui verranno numerati gli elementi nell'elenco. Esempio » type: specifica il tipo di indicatore da utilizzare per gli elementi dell'elenco: Etichetta O
Figura 2. Esempio di lavoro n. 2. 
Figura 3. Esempio di lavoro n. 3. Secondo modo
Figura 4. Esempio in esecuzione. 
Figura 5. Esempio in esecuzione. hanno un bordo rosso spesso 1 pixel. Ma l'elenco in alto, che utilizza la proprietà display, include gli elementi dell'elenco. Ma gli elementi dell'elenco creato utilizzando la proprietà float escono dal loro contenitore.
Figura 6. Esempio in esecuzione.
.
Figura 7. Esempio in esecuzione. 
Figura 8. Esempio in esecuzione. . In questo modo si ottiene la normale costruzione di pilastri con l'allineamento in altezza richiesto. Quando creiamo un menu, nella maggior parte dei casi non ci interessa l'altezza dei blocchi, è quasi sempre la stessa. Pertanto, l'uso della regola (display : inline-block ) in questi casi è del tutto giustificato.
Elenco con i numeri
Elenco con segni di spunta o altri simboli
tipo-stile-lista: quadrato; /*piazze*/Dove sono gli stili di elenco nel modello Twenty Eleven?
Come fare una lista numerata?
Elenco numerato utilizzando uno sfondo
contatore-azzeramento: punto; - imposta una variabile per il contatore di numerazione
posizione: relativa; - posiziona la numerazione accanto agli articoli stessi
contenuto: contro(punto); - visualizza il valore di una variabile
controincremento: punto 1; - aumenta il contatore di 1
posizione: assoluta;
sfondo: #BDC3C7; - sfondo per i numeri (lo sfondo può essere impostato con un colore o una bella icona
margine - margini
imbottitura - imbottitura
color - il colore del testo dell'elemento
sfondo - sfondo
text-align - allineamento del testo
font-weight - peso (saturazione) del fontElenco numerato con un'immagine univoca per ogni articolo
Come creare un elenco puntato (non numerato)?
Elenco puntato ul li con icone interfogliate
Come visualizzare più elenchi su una pagina con layout diversi?
Contenuto
Come creare collegamenti di ancoraggio nell'elenco dei contenuti?
Contenuto
, quindi, di sicuro, ha affrontato problemi. È impossibile accedere agli stili di questi elementi utilizzando i selettori css. Ma molto spesso, il design dell'interfaccia comporta la modifica del colore, dello sfondo, delle dimensioni, ecc.
html
Modo goffo tradizionale.
css
li( list-style: none; ) .num( color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40 pixel;) html
Modo carino e corretto.
css
ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); colore: bianco; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; ) html
.
Descrizione
Attributi
reversed: specifica che gli elementi dell'elenco saranno in ordine decrescente (invece che crescente). Possibili valori degli attributi booleani:
Esempio " supporta anche gli attributi e gli eventi globali
Stile predefinito
ol ( display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; ) Esempio
Materiali tematici:
Aggiornato: 20/04/2021
103583
Se noti un errore, seleziona una parte di testo e premi Ctrl + Invio
Categorie del sito
