Listy są bardzo efektywnym sposobem prezentacji treści. Na stronach www stosujemy trzy podstawowe rodzaje list: nieuporządkowane, uporządkowane i listy definicji. Poznaj możliwości stylizowania list w szablonach udostępnionych w Kuźni Dostępnych Stron.

Listy nieuporządkowane

Listy nieuporządkowane -<ul><li>....</li></ul>- z punktorami stosowane są do wyszczególnienia elementów lub czynności w przypadkach, gdy ich kolejność nie ma większego znaczenia.

Standardowe

<ul>

  • jakiś element wykazu,
  • również element wykazu,
  • jeszcze inny element wykazu,
  • element wykazu z podpunktami
    • element wykazu - podpunkt
    • element wykazu - podpunkt
    • element wykazu - podpunkt
  • kolejny element wykazu
  • następny element
  • jeszcze jeden

Bez stylu głównych punktów

<ul class="unstyled">

  • jakiś element wykazu,
  • również element wykazu,
  • jeszcze inny element wykazu,
  • element wykazu z podpunktami
    • element wykazu - podpunkt
    • element wykazu - podpunkt
    • element wykazu - podpunkt
  • kolejny element wykazu
  • następny element
  • jeszcze jeden

1. styl ze strzałkami

<ul class="jm-arrow">

  • jakiś element wykazu,
  • również element wykazu,
  • jeszcze inny element wykazu,
  • element wykazu z podpunktami
    • element wykazu - podpunkt
    • element wykazu - podpunkt
    • element wykazu - podpunkt
  • kolejny element wykazu
  • następny element
  • jeszcze jeden

2. styl kds

<ul class="jm-kds">

  • jakiś element wykazu,
  • również element wykazu,
  • jeszcze inny element wykazu,
  • element wykazu z podpunktami
    • element wykazu - podpunkt
    • element wykazu - podpunkt
    • element wykazu - podpunkt
  • kolejny element wykazu
  • następny element
  • jeszcze jeden

Listy uporządkowane

Listy uporządkowane- <ol><li>....</li></ol>wskazują na wymaganą kolejność czynności, zwykle są stosowane w prezentacji procedur.

Standardowa lista

<ol>

  1. Pierwszy krok
  2. Drugi krok
  3. Trzeci krok
  4. Czwarty krok
  5. Piąty krok
  6. Szósty krok
  7. Siódmy krok
  8. Ósmy krok
  9. Dziewiąty krok
  10. Dziesiąty krok

Z listą zagnieżdżoną

<ol>
<-- tu elementy listy -->
</ol>
  1. Wykonaj najpierw tę czynność.
  2. Potem wykonaj czynność kolejną.
  3. Później wykonaj czynność trzecią, na którą złożą się
    1. Działanie pierwsze
    2. Działanie drugie złożone z trzech kroków
      1. Krok 1 - polecenie
      2. Krok 2 - polecenie
      3. Krok 3 - polecenie

Z listą zagnieżdżoną - cyfry rzymskie

<ol class="jm-roman">
<-- tu elementy listy -->
</ol>
  1. Wykonaj najpierw tę czynność.
  2. Potem wykonaj czynność kolejną.
  3. Później wykonaj czynność trzecią, na którą złożą się
    1. Działanie pierwsze
    2. Działanie drugie złożone z trzech kroków
      1. Krok 1 - polecenie
      2. Krok 2 - polecenie
      3. Krok 3 - polecenie

Z listą zagnieżdżoną - małe litery

<ol class="jm-alpha">
<-- tu elementy listy -->
</ol>
  1. Wykonaj najpierw tę czynność.
  2. Potem wykonaj czynność kolejną.
  3. Później wykonaj czynność trzecią, na którą złożą się
    1. Działanie pierwsze
    2. Działanie drugie złożone z trzech kroków
      1. Krok 1 - polecenie
      2. Krok 2 - polecenie
      3. Krok 3 - polecenie
Logo Ministerstwa Administracji i Cyfryzacji Logo Spółzoelni FADO Logo Fundacji PCJ

Projekt współfinansowany ze środków Ministerstwa Administracji i Cyfryzacji