Kuinka luon luettelomerkki- ja numeroluettelon HTML:ssä?

Listat ovat loistava tapa järjestää osioita tai sisältöä verkkosivulla. Ne parantavat käyttökokemusta luokittelemalla tietoja tai ryhmittelemällä samankaltaisia ​​käsitteitä tai kohteita. HTML:ää käytettäessä on olemassa kahdenlaisia ​​luetteloita: luettelomerkitty ja numeroitu. Seuraavissa osissa kerrotaan, miten kukin luodaan ja miten niiden ulkoasua, sisäkkäisyyttä ja muotoa muutetaan.

Kuinka luoda luettelomerkitty luettelo

Luo luettelomerkitty luettelo käyttämällä järjestämättömiä luettelotunnisteita

ja luettelokohteen

-tageja alla olevan esimerkin mukaisesti.

Esimerkkikoodi

<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>

Yllä oleva esimerkki luo luettelomerkityn luettelon, jossa on kolme luettelomerkkiä alla olevan kuvan mukaisesti.

Esimerkkitulos

• Esimerkki
• Esimerkki2
• Esimerkki3

Kuinka luoda numeroitu luettelo

Luodaksesi numeroitu luettelo, käytä järjestettyjä luettelotunnisteita

ja luettelokohteen

-tageja alla olevan esimerkin mukaisesti.

Esimerkkikoodi

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>

Yllä oleva esimerkki luo luettelomerkityn luettelon, jossa on kolme luettelomerkkiä alla olevan kuvan mukaisesti.

Esimerkkitulos

1. Esimerkki 1
2. Esimerkki 2
3. Esimerkki 3

Numeroidun luettelon lopettaminen ja jatkaminen

Kun luot numeroitua luetteloa, saatat haluta “tauko” lisätäksesi toisen objektin, kuten luettelomerkin, kuvan tai kappaleen. Seuraava koodi luo numeroidun luettelon, joka muuttuu yhdestä kolmeen, näyttää kappaleen ja jatkaa sitten numeroitua luetteloa käyttämällä start-attribuuttia.

Esimerkkikoodi

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>
<p>Paragraph example.</p>
<ol start="4">
<li>Example 4</li>
<li>Example 5</li>
<li>Example 6</li>
</ol>

Aloitusattribuutti voi olla mikä tahansa numeerinen arvo ja se kertoo järjestetylle listalle, mitä numeroa käytetään aloitusnumerona.

Esimerkkitulos

1. Esimerkki 1
2. Esimerkki 2
3. Esimerkki 3

Esimerkki kappaleesta.

4. Esimerkki 4
5. Esimerkki 5
6. Esimerkki 6

Luetteloluettelon luominen numeroluetteloon

Voit myös laittaa luetteloita sisäkkäin luomalla aliluettelon. Tämä tekniikka, jota kutsutaan sisäkkäiksi, voidaan suorittaa aloittamalla luettelo jonkin luettelokohteen (

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
<li>Bullet 3</li>
</ul>
<li>Example 4</li>
<li>Example 5</li>
<li>Example 6</li>
</ol>

CSS:n käyttäminen luettelomerkkiin tai numeroituihin luetteloihin

Alla oleva esimerkki näyttää, kuinka CSS:ää käytetään luettelossa olevien luettelomerkkien kuvan muuttamiseen.

Esimerkkikoodi

#content ul li {
 list-style-Type: none;
 padding: 0 0 4px 23px;
 background: url(https://www.computerhope.com/cdn/arrow.png) no-repeat left center;
}

Tässä esimerkissä, joka käyttää ulkoista .css-tiedostoa, käskemme verkkosivua muuttamaan vain

-osion luettelomerkityt kohteet. Jos haluat, että kaikki luettelomerkityt kohteet muuttuvat, voit poistaa #content yllä olevassa esimerkissä. Toisella rivillä listatyyli-Type: none; käskee selainta olemaan näyttämättä luoteja. Kolmannella rivillä täyte: 0 0 4px 23px; on väli ja sisennys luotien ympärillä. Neljännellä rivillä tausta kertoo selaimen käyttämään kuvaa luodina ja missä se näytetään.

Esimerkkitulos

• Esimerkki 1
• Esimerkki 2
• Esimerkki 3