TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare elementi di elenco puntato in Weebly?

14

tag. Gli elenchi non ordinati utilizzano il disco come stile di elenco e gli elenchi ordinati utilizzano lo stile decimale per i punti elenco. Non ci sono ulteriori opzioni in Weebly per modificare questi valori predefiniti a meno che non li modifichi nel foglio di stile principale.

Modifica dello stile di elenco predefinito in CSS

Se desideri modificare lo stile dell’elenco predefinito, aggiungi il seguente codice nel file "main.less" (i vecchi temi avranno). Abbiamo utilizzato il cerchio e l’alfa inferiore rispettivamente per gli elenchi non ordinati e ordinati.

div.paragraph ul, div.paragraph ul li { list-style: circle outside !important; } div.paragraph ol, div.paragraph ol li { list-style: lower-alpha outside !important; }

Utilizzo delle icone fantastiche dei caratteri per gli elenchi puntati

Sebbene cambiare il foglio di stile principale sia facile, limita l’utilizzo a un particolare tipo di punto elenco. L’alternativa semplice e consigliata è utilizzare le icone fantastiche dei caratteri (o qualsiasi altra icona) come punto elenco negli elenchi. Ciò offre l’opportunità di aggiungere tipi illimitati di icone ai tuoi elenchi. Inoltre puoi utilizzare diverse icone di punti elenco per gli stessi elementi dell’elenco non ordinati o ordinati.

Come creare elementi di elenco puntato in Weebly?

Per utilizzare le fantastiche icone dei caratteri come elenco, aggiungi il codice seguente nella sezione "Codice intestazione" della tua pagina Weebly:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> .fa-ul { line-height: 28px; font-size: 22px; } </style>

Gli attributi dell’altezza della linea e della dimensione del carattere vengono utilizzati per garantire che le icone e il testo siano allineati correttamente. Di seguito è riportato il contenuto HTML da aggiungere all’interno di un elemento “Embed Code".

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Check Square</li> <li><i class="fa-li fa fa-book"></i>Book</li> <li><i class="fa-li fa fa-bullhorn"></i>Announcement</li> <li><i class="fa-li fa fa-gear"></i>Settings</li> <li><i class="fa-li fa fa-home"></i>Home</li> <li><i class="fa-li fa fa-phone-square"></i>Phone</li> </ul>

Ecco l’ elenco delle fantastiche icone dei caratteri come riferimento, scegli quello che desideri utilizzare e sostituisci la classe di icone evidenziata con la tua. Ad esempio, sostituisci "fa-book" con "fa-home" per sostituire l’icona del libro con l’icona della casa.

<li><i class="fa-li fa fa-book"></i>Book</li>

Sostituisci anche il testo con il tuo.

Elenchi CSS con punti elenco immagine

Puoi usare i CSS per definire un’immagine come un punto elenco per gli elementi dell’elenco.

Come creare elementi di elenco puntato in Weebly?

Per prima cosa scegli l’immagine da utilizzare come proiettile e caricala sul tuo sito Weebly. Quindi aggiungi il codice seguente nella sezione "Codice intestazione" della tua pagina:

<style> .bul { list-style-image: url("/files/theme/Hand.png"); font-size: 24px; line-height: 32px; margin-left: 36px; } </style>

Qui "Hand.png" è l’immagine utilizzata per il proiettile e gli stili rimanenti servono a garantire che il contenuto sia allineato con l’immagine del proiettile. Aggiungi il codice HTML sottostante e pubblica il sito per vedere i proiettili in azione.

<ul class="bul"> <li>JavaScript</li> <li>CSS</li> <li>PHP</li> </ul>

Elenchi CSS con diversi tipi di punti elenco

Puoi anche utilizzare i CSS per creare diversi tipi di elenchi puntati per elenchi non ordinati e ordinati.

Come creare elementi di elenco puntato in Weebly?

Aggiungi il seguente codice CSS nella sezione "Codice intestazione" della tua pagina Weebly.

<style> .css-list1 { list-style-type: circle; } .css-list2 { list-style-type: disc; } .css-list3 { list-style-type: upper-roman; } .css-list4 { list-style-type: lower-alpha; } .common { margin-left: 36px; font-size: 24px; line-height: 32px; } </style>

In questo esempio, creiamo quattro diversi stili di punti elenco: due per gli elenchi non ordinati e due per gli elenchi ordinati con attributi di classe "comuni" per margine, dimensione del carattere e altezza della linea per garantire l’allineamento del contenuto. Aggiungi il codice HTML sottostante utilizzando l’ elemento " Incorpora codice " per creare elenchi con diversi stili di punti elenco.

<!-- Unordered List with circle --> <ul class="css-list1 common"> <li>WordPress Development</li> <li>Weebly Development</li> <li>Joomla Development</li> </ul> <!-- Unordered List with disc --> <ul class="css-list2 common"> <li>Blog - Latest Updates</li> <li>Forum - Post Your Opinion</li> <li>Email - Contact Us</li> </ul> <!-- Ordered List with upper-roman --> <ol class="css-list3 common"> <li>Free Email Support</li> <li>Free Domain Registration</li> <li>Free Hosting</li> </ol> <!-- Ordered List with lower-alpha --> <ol class="css-list4 common"> <li>Google</li> <li>Apple</li> <li>Microsoft</li> </ol>

Nota: la proprietà CSS "list-style-type" può essere utilizzata per definire lo stile del punto elenco sia per gli elenchi ordinati che per quelli non ordinati.

Valori per il tipo di stile elenco

Di seguito è riportato un elenco di valori che puoi fornire per il tipo di stile elenco in CSS.

armeno hiragana latino-inferiore
cerchio hiragana-iroha basso-romano
cjk-ideographic ereditare nessuno
decimale iniziale quadrato
decimale-zero-iniziale dire alfa-superiore
disco katakana-iroha latino-superiore
georgiano alfa inferiore alto-romano
ebraico greco-basso

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More