TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage punkter med punktliste i Weebly?

10

tagger. De uordnede listene bruker platen som listestil, og de ordnede listene bruker desimalstil for kulene. Det er ikke noe annet alternativ i Weebly å endre disse standardverdiene med mindre du endrer det i hovedstilarket.

Endre standard listestil i CSS

Hvis du vil endre standard listestil, legger du til følgende kode i filen "main.less" (gamle temaer vil ha). Vi brukte sirkel og lavere alfa for henholdsvis uordnede og ordnede lister.

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

Bruk av Font Awesome Icons For Lists Bullets

Selv om det er enkelt å endre hovedstilarket, begrenser det bruken til en bestemt punkttype. Det enkle og anbefalte alternativet er å bruke fantastiske skrifttyper (eller andre ikoner) som en kule i listene. Dette gir mulighet til å legge til ubegrensede typer ikoner i listene dine. Videre kan du bruke forskjellige kuleikoner for de samme uordnede eller bestilte listeelementene.

Hvordan lage punkter med punktliste i Weebly?

For å bruke fantastiske ikoner for skrifttyper som liste, legg til koden nedenfor under "Header Code" -delen på Weebly -siden din:

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

Attributtene linjehøyde og skriftstørrelse brukes til å sikre at ikonene og teksten er riktig justert. Nedenfor er HTML -innholdet som skal legges til i et "Embed Code" -element.

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

Her er fonten fantastisk ikoneliste for din referanse, velg den du vil bruke og erstatt den uthevede ikonklassen med din egen. For eksempel bytt ut "fa-bok" med "fa-home" for å erstatte bokikonet med hjem-ikonet.

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

Erstatt også teksten med din egen.

CSS -lister med Image Bullets

Du kan bruke CSS til å definere et bilde som en kule for listeelementer.

Hvordan lage punkter med punktliste i Weebly?

Velg først bildet som skal brukes som en kule, og last det opp på ditt Weebly -nettsted. Legg deretter til koden nedenfor under "Topptekst" -delen på siden din:

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

Her er "Hand.png" bildet som brukes for bullet, og gjenværende stiler er for å sikre at innholdet er justert med bullet -bildet. Legg til HTML -koden nedenfor og publiser nettstedet for å se kulene i aksjon.

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

CSS -lister med forskjellige kuletyper

Du kan også bruke CSS til å lage forskjellige typer kuler for uordnede og ordnede lister.

Hvordan lage punkter med punktliste i Weebly?

Legg til CSS -koden nedenfor under "Header Code" på Weebly -siden din.

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

I dette eksemplet oppretter vi fire forskjellige kulestiler – to for uordnet og to for ordnede lister med en "vanlig" klasseattributt for margin, skriftstørrelse og linjehøyde for å sikre innholdets justering. Legg til HTML -koden nedenfor ved å bruke " Embed Code " -elementet for å lage lister med forskjellige kulestiler.

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

Merk: CSS "list-style-type" -egenskap kan brukes til å definere punkttegn for både bestilte og uordnede lister.

Verdier for List Style Type

Nedenfor er en liste over verdier du kan oppgi for liste-stil-type i CSS.

armenisk hiragana lavere latin
sirkel hiragana-iroha nedre-romersk
cjk-ideografisk arve ingen
desimal første torget
desimal-ledende-null si øvre alfa
plate katakana-iroha øvre latin
georgisk lavere alfa over-roman
Hebraisk lavere-gresk

Opptakskilde: www.webnots.com

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon