Hvordan lage punkter med punktliste i Weebly?

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.

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.

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.

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.