È possibile utilizzare CSS per creare elenchi puntati e numerati e utilizzare un'immagine adatta come punto elenco.
tavolo 1 elenca le proprietà degli elementi destinati alla creazione e alla modifica delle liste.
| Proprietà | Valore | Descrizione | Esempio |
|---|---|---|---|
| tipo di elenco | disco cerchio piazza decimale romano minuscolo maiuscolo alfa inferiore alfa superiore nessuna |
Tipo di marker. I primi tre vengono utilizzati per creare un elenco puntato e gli altri vengono utilizzati per creare un elenco numerato. | LI (list-style-type: circle) LI (list-style-type: upper-alpha) |
| list-style-image | nessuna Url |
Imposta il simbolo del marker su qualsiasi immagine. | LI (list-style-image: url (check.gif)) |
| list-style-position | al di fuori dentro |
Selezione della posizione del marker relativa al blocco di righe di testo. | LI (list-style-position: inside) |
| in stile elenco | Una proprietà universale che include simultaneamente tutte le proprietà di cui sopra. |
Dal momento che il tag
- o
- Il titolo dovrebbe essere più corto di tre righe.
- Quando si nominano le sezioni, utilizzare termini già consolidati come libro degli ospiti, chat, collegamento, home page e altri.
- Prima di usare un termine o una parola specifica, decidi se il lettore lo capirà.
- prestazioni di tutti i collegamenti
- supporto per diversi browser
- leggibilità del testo
- prestazioni di tutti i collegamenti
- supporto per diversi browser
- leggibilità del testo
- prestazioni di tutti i collegamenti
- supporto per diversi browser
- leggibilità del testo
- primo
- secondo
- il terzo
- primo
- secondo
- il terzo
- primo
- secondo
- il terzo
- primo
- secondo
- il terzo
- primo
- secondo
- il terzo
- Lista non ordinata
- Lista non ordinata
- Lista non ordinata
- Lista non ordinata
- nessuna - Rimuove i marcatori dall'elenco
- cerchio - Marcatore a forma di cerchio
- disco " - Marcatore sotto forma di un cerchio pieno. Valore di default
- piazza - Marker a forma di quadrato
- armeno - Numerazione armena
- decimale - Indicatore del numero
- zero iniziale decimale - Numeri con "0" prima dell'inizio (01, 02, 03, ecc.)
- georgiano - Numerazione georgiana
- alfa inferiore - (a, b, c, d, e, ecc.)
- greco inferiore - (alfa, beta, gamma, ecc.)
- latino inferiore - (a, b, c, d, e, ecc.)
- Iower-roman - (i, ii, iii, iv, v, ecc.)
- alfa superiore - (A, B, C, D, E, ecc.)
- latino superiore - (A, B, C, D, E, ecc.)
- maiuscolo - (I, II, III, IV, V, ecc.)
- ereditare - Il valore deve essere ereditato dall'elemento padre
- .
- Voce di elenco
- Elenco unico
- Liste originali
- ZORNET.RU - Per Webmaster
- Un altro elenco
- Voce di elenco
- Elenco unico
- Liste originali
- ZORNET.RU - Per Webmaster
- Un altro elenco
- Script per uCoz
- Modelli per uCoz
- Progettazione di siti web
- Stili per il sito
- Stile CSS
- Il primo elemento per il sito
- Secondo elemento per il sito
- Terzo elemento per il sito
- Il quarto elemento per il sito
- Il quinto elemento per il sito
- che funge da genitore, è possibile impostare lo stile per entrambi i selettori UL e LI. Quindi, nell'esempio 1, viene utilizzato il selettore UL e per esso vengono impostati i parametri di stile.
Esempio 1. Creazione di un elenco puntato
Il risultato di questo esempio è mostrato in Fig. 1. Utilizza indicatori quadrati e la loro posizione esterna rispetto al testo.
Figura: 1. Vista dell'elenco modificata con gli stili
La proprietà list-style-image viene utilizzata per impostare la propria immagine come marker, come mostrato nell'esempio 2.
Esempio 2. Utilizzo di immagini come marker
Il risultato di questo esempio è mostrato in Fig. 2. Una piccola immagine viene utilizzata come marker.
Figura: 2. Immagini come indicatori
Alcuni esempi di creazione di elenchi diversi sono forniti nella tabella. 2.
| Codice HTML | Esempio |
|---|---|
| |
|
| Cose da considerare quando si prova un sito: |
|
| Cose da considerare quando si prova un sito: |
|
|
Elenco numerato con numeri arabi: |
|
|
Un elenco numerato con numeri romani minuscoli: |
|
|
Elenco numerato con numeri romani maiuscoli: |
|
|
Un elenco numerato con lettere latine minuscole: |
|
|
Un elenco numerato con lettere maiuscole dell'alfabeto latino: |
Continuiamo a studiare CSS proprietà di vari elementi. E in questa lezione parleremo del design degli elenchi. In pratica, gli elenchi vengono utilizzati abbastanza spesso, quindi queste proprietà devono essere ricordate.
Visualizzazione marker comune
E il primo è impostare l'aspetto dei marcatori. Gli elenchi hanno indicatori diversi. In lezioni su HTML Elenchi numerati mostra come modificare i marker utilizzando l'attributo genere ... Ma sapere CSS questo attributo non è più necessario, poiché tutto ciò è fatto molto più comodamente, grazie al foglio di stile CSS.
Per dimostrazione, creiamo un elenco utilizzando CSS... Non importa quale sia elenco numerato o lista non ordinata, da quando si utilizza la proprietà list-style-typet possiamo aggiungere marcatori o rimuoverli.
HTML
E così, è stato creato un elenco regolare e, per impostazione predefinita, i marcatori sono stati creati sotto forma di cerchi pieni. E molto spesso sorge la domanda, come rimuovere i punti elenco?
Rimozione del marker dall'elenco utilizzando la proprietà list-style-typet e assegnandogli un valore nessuna ... Questa è l'opzione più popolare per rimuovere i punti elenco da un elenco. E per l'elenco imposteremo la stessa proprietà.
Ul (list-style-type: none;)
Ora, se aggiorniamo la pagina, vedremo che questa proprietà ha rimosso i marker dall'elenco.
Questi sono tutti i tipi di punti elenco per elenchi. I primi quattro tipi sono i più comuni, gli altri sono usati raramente.
Bene, ad esempio, selezioniamo e impostiamo un marker sotto forma di grandi numeri romani. Questo viene fatto semplicemente: al posto del significato nessuna metti il \u200b\u200bnome del nostro pennarello maiuscolo .
Ul (list-style-type: upper-roman;)
L'aggiornamento della pagina rivela grandi numeri romani negli elenchi in stile puntato. In questo modo è possibile modificare l'aspetto dei marcatori di elenco impostando l'aspetto desiderato tramite la proprietà tipo di elenco .
Marcatore immagine
Il secondo punto, piuttosto importante, e un marker utilizzato di frequente è un'immagine sotto forma di un marker. Spesso è necessario utilizzare un pennarello sotto forma di una bella immagine e le solite opzioni per i marcatori presentati CSS inadatto. Per questo, vengono utilizzate le immagini. E questo viene fatto usando una proprietà speciale chiamata list-style-image ... Questo indicherà al browser che avremo un'immagine come marker.
Scatta qualsiasi foto su Internet di dimensioni (15 px x 15 px)che prevedi di utilizzare come marker e posizionalo nella cartella precedentemente creata con le immagini immagini... Dopodiché, la proprietà rimane list-style-image specificare il percorso dell'immagine e il browser sostituirà l'immagine invece del marcatore.
NEL CSS il percorso è indicato utilizzando la parola chiave url () ... Specificare il percorso dell'immagine tra parentesi ../images/ Nome immagine.jpg , relativo al foglio di stile.
Cioè, cosa significa in relazione al foglio di stile? Il nostro foglio di stile è un file style.css , si trova nella directory CSSe l'immagine è nella directory immagini... Ciò significa che il browser deve prima dire al browser di uscire dalla directory. CSS, questo è fatto in questo modo: ../ , quindi vai alla directory con l'immagine immagini e solo allora trova l'immagine desiderata.
Ul (list-style-image: url (../ images / Name of the marker image.jpg);)
Se hai specificato il percorso corretto dell'immagine, il browser caricherà la tua immagine invece dei soliti marcatori.
Quando si utilizza un'immagine come indicatore, è necessario conoscere un'altra proprietà responsabile della posizione dell'indicatore dell'immagine. Per vedere come funziona questa proprietà, noi facciamo una cornice rosso per tutti gli elementi
Ul li (bordo: 2px solido # ff0000;)
Ora, se guardi, il tuo indicatore dell'immagine è fuori dalla voce dell'elenco, la stessa cornice che abbiamo creato sopra. Pertanto, ci sono momenti in cui è necessario che il marcatore si trovi all'interno dell'elemento dell'elenco. Per questo c'è una proprietà list-style-position che è inizialmente impostato su al di fuori , ovvero, imposta i marcatori all'esterno dell'elemento.
Per incorporare il marcatore all'interno dell'elemento, utilizza il valore dentro ... Ora, se imposti questa proprietà su value dentro , quindi il marcatore sarà all'interno dell'elemento della lista e il riquadro rosso ci mostra chiaramente questo.
Ul (list-style-image: url (../ images / Name of the marker image.jpg); list-style-position: inside;) ul li (border: 2px solid # ff0000;)
Ecco come funzionano queste tre proprietà. C'è anche una notazione abbreviata che combina tutte queste proprietà.
Cioè, la proprietà è specificata in stile elenco e poi, in ordine, i valori del tipo di marker, della posizione del marker e, se necessario, del percorso dell'immagine, che sarà il marker. E otteniamo la seguente immagine:
Ul (list-style: inside url (../ images / Marker image name.jpg);)
È così che viene scritta una versione breve delle regole relative alla comparsa delle liste. Questa voce dice che il marker deve essere all'interno dell'elemento e il marker sarà la stessa immagine
Questo è tutto con le liste, ma dedica un po 'più di tempo alle liste, ma esercitati con l'installazione di vari marcatori, senti come funziona il tutto. NEL demo verranno mostrate le opzioni per le impostazioni dei marker, dove potrai, per confronto, verificare la correttezza del tuo lavoro.
Elenchi CSS - un insieme di proprietà responsabili della progettazione degli elenchi. L'uso di elenchi HTML è molto comune durante la creazione di barre di navigazione del sito. Gli elementi dell'elenco rappresentano una raccolta di elementi del blocco.
Con le proprietà CSS standard puoi modificare l'aspetto del marcatore elenco, aggiungi un'immagine per il marker, e cambia la posizione dell'indicatore... L'altezza del blocco marker può essere impostata con la proprietà line-height.
Elenchi di stili con stili CSS
1. List marker type list-style-type
La proprietà cambia il tipo di marker o rimuove il marker per elenchi puntati e numerati. Ereditato.
| tipo di elenco | |
|---|---|
| Valori: | |
| disco | Valore di default. Il cerchio pieno viene utilizzato come indicatore per gli elementi dell'elenco. |
| armeno | Numerazione armena tradizionale. |
| cerchio | Un cerchio aperto viene utilizzato come indicatore. |
| cjk-ideographic | Numerazione ideografica. |
| decimale | 1, 2, 3, 4, 5, … |
| zero iniziale decimale | 01, 02, 03, 04, 05, … |
| georgiano | Numerazione georgiana tradizionale. |
| ebraico | Numerazione ebraica tradizionale. |
| hiragana | Numerazione giapponese: a, i, u, e, o, ... |
| hiragana-iroha | Numerazione giapponese: i, ro, ha, ni, ho, ... |
| katakana | Numerazione giapponese: A, I, U, E, O, ... |
| katakana-iroha | Numerazione giapponese: I, RO, HA, NI, HO, ... |
| alfa inferiore | a, b, c, d, e, ... |
| greco inferiore | Simboli minuscoli dell'alfabeto greco. |
| latino inferiore | a, b, c, d, e, ... |
| romano minuscolo | io, ii, iii, iv, v, ... |
| nessuna | Manca il pennarello. |
| piazza | Un quadrato pieno o non dipinto viene utilizzato come indicatore. |
| alfa superiore | A, B, C, D, E, ... |
| latino superiore | A, B, C, D, E, ... |
| maiuscolo | I, II, III, IV, V, ... |
| iniziale | Imposta il valore della proprietà sul valore predefinito. |
| ereditare | Eredita il valore della proprietà dall'elemento padre. |
Sintassi
Ul (list-style-type: none;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) 
Figura: 1. Un esempio di progettazione di elenchi puntati e numerati
2. Immagini per voci di elenco in stile elenco
È possibile utilizzare immagini e riempimenti sfumati come marker per gli elementi dell'elenco. Ereditato.
Sintassi
Ul (list-style-image: url ("images / romb.png");) ul (list-style-image: linear-gradient (# FF7A2F 0, # FF7A2F 50%, # FFB214 50%);) 
Figura: 2. Progettare un elenco puntato utilizzando un'immagine 
Figura: 3. Applicare uno stile a un elenco puntato con una sfumatura
3. Posizione del marker della lista list-style-position
Questa proprietà offre la possibilità di posizionare il marker all'esterno o all'interno del contenuto della voce di elenco. Ereditato.
Benvenuti nel mio blog. Oggi vorrei toccare l'argomento di come rimuovere i marker dagli elementi dell'elenco puntato (ul li) tramite css, perché spesso non sono necessari e interferiscono solo con il design del sito.
Rimozione dei marker predefiniti
A volte devi solo rimuoverli. Ad esempio, quando si decora un menu o qualcos'altro. La proprietà list-style-type o abbreviato list-style è responsabile della visualizzazione dei marcatori. Il valore predefinito è circle, che è un cerchio pieno di nero. Per rimuoverlo, devi solo scrivere in questo modo:
Ul (
Tipo di elenco: nessuno;
}
Ul (
Stile elenco: nessuno;
}
Notare che la proprietà viene scritta in generale sull'intero elenco e non sui singoli elementi. È molto importante. La voce precedente rimuove i punti elenco da tutti gli elenchi sul tuo sito, ma è possibile che tu abbia più design di elenchi.
In questo caso, le classi aiuteranno a far fronte al loro stile. Devi solo riagganciare la classe di stile per gli elenchi necessari e progettarli.
Come mettere la tua immagine del pennarello
Sì, sì, CSS ti consente di creare il tuo marker molto più attraente. Può anche essere impostato usando la proprietà list-style-image, o più semplicemente usando list-style. Il valore tra parentesi contiene il percorso del file e davanti ad esso è necessario inserire la parola chiave url.
Se decidi di modificare gli elenchi ul e li standard, questo argomento ti interesserà. Da qui troverai diverse soluzioni originali. Il che ti aiuterà sicuramente a cambiare la visualizzazione standard in una unica, dove va lo stile CSS, per il design degli elenchi. Il vantaggio è che useremo solo una classe in tutto, il che cambierà radicalmente l'aspetto. Oltre a questi parametri, puoi specificare a quale numero deve iniziare la lista, qui puoi fare tutto da solo. L'impostazione predefinita iniziale per gli elenchi numerati è la prima o la lettera A.Sulla base delle nozioni di base, esamineremo ora più da vicino gli elementi utilizzati per fornire struttura e significato a varie parti del progetto. Se qualcuno non lo sa, ul e li sono opzioni molto migliori del testo normale, perché quando il testo è a capo, specialmente su dispositivi mobili, è perfettamente rientrato e non si avvolge intorno al marcatore.
Gli elenchi sono considerati un ottimo modo per presentare le informazioni sulle pagine perché sono facili da leggere e hanno un bell'aspetto. Molte persone sembrano pensare che i punti elenco siano piccole immagini, ma in realtà sono tutte create tramite codice HTML abbastanza semplice. Puoi annidare diversi tipi di elenchi l'uno nell'altro se lo desideri, ricordati solo di chiuderli correttamente. Puoi giocare con il testo che desideri in tutti questi comandi dell'elenco.
Devi anche sapere che gli elenchi inizialmente contengono diversi elementi:
1
... Informazioni disordinate.
2
... Informazioni ordinate.
3
... Definizioni.
Iniziare con l'installazione:
1. Opzione:
CSS
Ksangelopan (
margine: 19px 0 0;
imbottitura: 0;
stile elenco: nessuno;
counter-reset: li;
}
.ksangelopan li (
bordo: 2px solido # 3575ad;
sfondo: # d7dee4;
posizione: relativa;
margine inferiore: 17 px;
imbottitura: 15px 9px;
}
.ksangelopan li: hover (
z-index: 1;
}
.ksangelopan li: prima (
bordo: 2px solido # 2270b3;
posizione: assoluta;
in alto: -14px;
imbottitura: 3px 9px;
dimensione del carattere: 11px;
spessore del carattere: grassetto;
colore: # 246eaf;
sfondo: # f2f4f7;
controincremento: li;
contenuto: counter (li);
-webkit-durata-transizione: 0.4s;
durata della transizione: 0.4s;
}
.ksangelopan li: hover: before (
sfondo: # 2672b3;
colore: # f7f9fb;
-webkit-transform: translate (-11px, 0);
-ms-transform: translate (-11px, 0);
-o-transform: translate (-11px, 0);
trasformare: translate (-11px, 0);
}
.ksangelopan li: dopo (
contenuto: "";
posizione: assoluta;
durata della transizione: 0,3 s;
-webkit-proprietà-transizione: larghezza;
proprietà di transizione: larghezza;
z-index: -1;
sfondo: #FFF;
altezza: 100%;
sinistra: 0;
in alto: 0;
larghezza: 0;
}
.ksangelopan li: hover: after (
larghezza: 100%;
}
Questa è l'intera installazione.
2 Seconda opzione:
CSS
Beleduzlopamges (
margin-bottom: 8px;
imbottitura: 0;
stile elenco: nessuno;
counter-reset: li;
}
.beleduzlopamges li (
posizione: relativa;
bordo: 2px solido # 195588;
sfondo: # eff3f7;
imbottitura: 15px 19px 15px 27px;
margine: 12px 0 12px 40px;
-webkit-durata-transizione: 0.3s;
durata della transizione: 0,3 s;
}
.beleduzlopamges li: hover (
sfondo: #FFF;
}
.beleduzlopamges li: before (
line-height: 32px;
posizione: assoluta;
in alto: 4px;
sinistra: -39px;
larghezza: 39px;
text-align: center;
dimensione del carattere: 16px;
spessore del carattere: grassetto;
colore: # f9f5f5;
sfondo: # 275b88;
controincremento: li;
contenuto: counter (li);
durata della transizione: 0.2s;
}
.beleduzlopamges li: hover: before (
larghezza: 46px;
}
.beleduzlopamges li: after (
posizione: assoluta;
sinistra: 0;
in alto: 4px;
contenuto: "";
altezza: 0;
larghezza: 0;
bordo: 16px trasparente solido;
border-left-color: # 275b88;
-webkit-durata-transizione: 0.2s;
durata della transizione: 0.2s;
}
.beleduzlopamges li: hover: after (
margine sinistro: 6px;
}
La scala centrale può essere impostata in modo indipendente per adattarsi allo stile principale del sito.
3 Terza opzione:
CSS
Nizualisanelag (
imbottitura: 0;
stile elenco: nessuno;
counter-reset: li;
}
.nizualisanelag li (
posizione: relativa;
imbottitura: 9px 17px 17px 25px;
margine sinistro: 39px;
durata della transizione: 0.2s;
cursore: puntatore;
spessore del carattere: grassetto;
colore: # 343638;
}
.nizualisanelag li: prima (
bordo: 3px trasparente solido;
line-height: 35px;
posizione: assoluta;
in alto: 0;
sinistra: -29px;
larghezza: 41px;
text-align: center;
dimensione del carattere: 14px;
spessore del carattere: grassetto;
colore: # 619dce;
controincremento: li;
contenuto: counter (li);
durata della transizione: 0,3 s;
dimensionamento scatola: border-box;
}
.nizualisanelag li: hover: before (
colore: # 337AB7;
}
.nizualisanelag li: dopo (
posizione: assoluta;
in alto: 0;
sinistra: -29px;
larghezza: 41px;
altezza: 41px;
bordo: 5px solido # 468bd0;
raggio del bordo: 50%;
contenuto: "";
opacità: 0,5;
-webkit-box-dimensionamento: border-box;
-moz-box-dimensionamento: border-box;
dimensionamento scatola: border-box;
}
.nizualisanelag li: hover: after (
animazione: 500 ms di facilità in entrata e uscita di 0 secondi di rimbalzo;
opacità: 1;
}
@keyframes bounceIn (
0% {
opacità: 0;
trasformare: scale3d (.3, .3, .3);
}
20% {
trasformare: scale3d (1.3, 1.3, 1.3);
}
40% {
trasformare: scale3d (.9, .9, .9);
}
60% {
opacità: 1;
trasformare: scale3d (1.03, 1.03, 1.03);
}
80% {
trasformare: scale3d (.97, .97, .97);
}
per (
opacità: 1;
trasformare: scale3d (1, 1, 1);
}
}
Viene fornito con una bellissima animazione.
4 Quarta opzione:
CSS
Imbottitura: 0;
stile elenco: nessuno;
}
.kudezamuden li (
imbottitura: 6px;
}
.kudezamuden li: prima (
padding-right: 11px;
spessore del carattere: grassetto;
colore: # 4979a0;
contenuto: "\\ 2606";
durata della transizione: 0.4s;
}
.kudezamuden li: hover: before (
colore: # 235e90;
contenuto: "\\ 2605";
}
Simile alle versioni precedenti, solo l'icona stessa è stata modificata.
In generale, questa è una piccola selezione di elenchi, darà al webmaster un bellissimo elenco sul portale, dove lui stesso potrà organizzarlo di più, come vuole vederlo.
Se è necessario inserire elementi in un elenco numerato anziché in un elenco puntato, qui verrà utilizzato l'HTML ordinato. Questo elenco viene creato utilizzando il tag ol. La numerazione inizia da uno e aumenta di uno per ogni successiva voce di elenco ordinata con un tag li.
