TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda luettelomerkintöjä Weeblyssä?

1

tunnisteita. Järjestämättömät luettelot käyttävät levyä luettelotyylinä ja järjestetyt luettelot luodit desimaalityylinä. Weeblyssä ei ole muuta vaihtoehtoa muuttaa näitä oletusarvoja, ellet muuta sitä tyylitaulukossa.

Luettelon oletustyylin muuttaminen CSS: ssä

Jos haluat muuttaa luettelon oletustyyliä, lisää seuraava koodi "main.less" (vanhoihin teemoihin) -tiedostoon. Järjestämättömissä ja järjestetyissä luetteloissa käytimme ympyrää ja alempaa alfaa.

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; }

Mahtavien fonttikuvakkeiden käyttäminen luetteloissa Luettelomerkit

Vaikka päätaulukon vaihtaminen on helppoa, se rajoittaa käytön tiettyyn luodityyppiin. Yksinkertainen ja suositeltava vaihtoehto on käyttää mahtavia kirjasinkuvakkeita (tai muita kuvakkeita) luettelomerkiksi. Tämä antaa mahdollisuuden lisätä rajattomasti erilaisia ​​kuvakkeita luetteloihisi. Lisäksi voit käyttää eri luettelomerkkejä samoille tilaamattomille tai tilattuille luettelokohteille.

Kuinka luoda luettelomerkintöjä Weeblyssä?

Jos haluat käyttää mahtavia kirjasinkuvakkeita luettelona, ​​lisää alla oleva koodi Weebly -sivusi Otsikkokoodi -osioon:

<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>

Rivikorkeuden ja fonttikoon määritteillä varmistetaan, että kuvakkeet ja teksti kohdistetaan oikein. Alla on upotettava koodi -elementtiin lisättävä HTML -sisältö.

<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>

Tässä on fontin mahtavien kuvakkeiden luettelo viitteellesi, valitse haluamasi ja korvaa korostettu kuvakeluokka omallasi. Korvaa esimerkiksi "fa-kirja” sanalla “fa-home”, jos haluat korvata kirjan kuvakkeen kotikuvakkeella.

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

Korvaa myös teksti omallasi.

CSS -luettelot, joissa on kuvamerkkejä

CSS: n avulla voit määrittää kuvan luettelomerkkien luettelomerkiksi.

Kuinka luoda luettelomerkintöjä Weeblyssä?

Valitse ensin luodiksi käytettävä kuva ja lataa se Weebly -sivustollesi. Lisää sitten alla oleva koodi sivusi Otsikkokoodi -osioon:

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

Tässä "Hand.png" on luettelomerkissä käytetty kuva ja loput tyylit varmistavat, että sisältö on linjassa luodikuvan kanssa. Lisää alla oleva HTML -koodi ja julkaise sivusto nähdäksesi luodit toiminnassa.

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

CSS -luettelot, joissa on erilaisia ​​luodityyppejä

Voit myös käyttää CSS: ää luodaksesi erityyppisiä luoteja järjestämättömille ja järjestetyille luetteloille.

Kuinka luoda luettelomerkintöjä Weeblyssä?

Lisää alla oleva CSS -koodi Weebly -sivusi Otsikkokoodi -osioon.

<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>

Tässä esimerkissä luomme neljä erilaista luodityyliä – kaksi järjestämättömälle ja kaksi tilatulle listalle, joissa on “yhteiset” luokkamääritteet marginaalille, fontin koolle ja rivin korkeudelle sisällön kohdistuksen varmistamiseksi. Lisää alla oleva HTML -koodi käyttämällä Upota koodi -elementtiä luodaksesi luetteloita eri luodityyleillä.

<!-- 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>

Huomautus: CSS "list-style-type" -ominaisuutta voidaan käyttää luodin tyylin määrittämiseen sekä tilattuihin että järjestämättömiin luetteloihin.

Luettelotyypin tyypin arvot

Alla on luettelo arvoista, jotka voit antaa CSS-luettelotyyppiselle tyypille.

armenialainen hiragana alempi latinalainen
ympyrä hiragana-iroha alempi-roomalainen
cjk-ideografinen periä ei mitään
desimaali alkukirjain neliö-
desimaali-johtava-nolla sanoa ylempi alfa
levy katakana-iroha ylempi latina
georgialainen alempi alfa ylempi-roomalainen
heprealainen alempi kreikkalainen

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja