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>
- Pierwszy krok
- Drugi krok
- Trzeci krok
- Czwarty krok
- Piąty krok
- Szósty krok
- Siódmy krok
- Ósmy krok
- Dziewiąty krok
- Dziesiąty krok
Z listą zagnieżdżoną
<ol>
<-- tu elementy listy -->
</ol>
- Wykonaj najpierw tę czynność.
- Potem wykonaj czynność kolejną.
- Później wykonaj czynność trzecią, na którą złożą się
- Działanie pierwsze
- Działanie drugie złożone z trzech kroków
- Krok 1 - polecenie
- Krok 2 - polecenie
- Krok 3 - polecenie
Z listą zagnieżdżoną - cyfry rzymskie
<ol class="jm-roman">
<-- tu elementy listy -->
</ol>
- Wykonaj najpierw tę czynność.
- Potem wykonaj czynność kolejną.
- Później wykonaj czynność trzecią, na którą złożą się
- Działanie pierwsze
- Działanie drugie złożone z trzech kroków
- Krok 1 - polecenie
- Krok 2 - polecenie
- Krok 3 - polecenie
Z listą zagnieżdżoną - małe litery
<ol class="jm-alpha">
<-- tu elementy listy -->
</ol>
- Wykonaj najpierw tę czynność.
- Potem wykonaj czynność kolejną.
- Później wykonaj czynność trzecią, na którą złożą się
- Działanie pierwsze
- Działanie drugie złożone z trzech kroków
- Krok 1 - polecenie
- Krok 2 - polecenie
- Krok 3 - polecenie
