Wstawianie list numerowanych w HTML-u

Stronę tą wyświetlono już: 312 razy

Wstawianie listy numerowanej w kodzie strony

Oto przykład utworzenia listy numerowanej:

Listing 1
  1. <p>Lista pięciu największych jezior w Polsce:</p>
  2. <ol><li>Śniardwy</i>
  3. <li>Mamry</li>
  4. <li>Łebsko</li>
  5. <li>Dąbie</li>
  6. <li>Miedwie</li></ol>

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  1. Śniardwy
  2. Mamry
  3. Łebsko
  4. Dąbie
  5. Miedwie

Listy można zagnieżdżać:

Listing 2
  1. <style>li ol{ /* dla elementu ol znajdującego się wewnątrz elementu li ustaw następujące style */
  2. list-style-type: lower-alpha;
  3. }
  4. </style>
  6. <p>Lista pięciu największych jezior w Polsce:</p>
  7. <ol><li>Śniardwy
  8. <ol><li>powierzchnia: 11487,5 ha</li>
  9. <li>głębokość maksymalna: 23,4 m</li></ol>
  10. </li>
  11. <li>Mamry
  12. <ol><li>powierzchnia: 9851,0 ha</li>
  13. <li>głębokość maksymalna: 43,8 m</li></ol>
  14. </li>
  15. <li>Łebsko
  16. <ol><li>powierzchnia: 7020,0 ha</li>
  17. <li>głębokość maksymalna: 6,3 m</li></ol>
  18. </li>
  19. <li>Dąbie
  20. <ol><li>powierzchnia: 5408 ha</li>
  21. <li>głębokość maksymalna: 4,2 m</li></ol>
  22. </li>
  23. <li>Miedwie
  24. <ol><li>powierzchnia: 3491,0 ha</li>
  25. <li>głębokość maksymalna: 43,8 m</li></ol>
  26. </li></ol>

Wynik powyższego kodu:

Lista pięciu największych jezior w Polsce:

  1. Śniardwy
    1. powierzchnia: 11487,5 ha
    2. głębokość maksymalna: 23,4 m
  2. Mamry
    1. powierzchnia: 9851,0 ha
    2. głębokość maksymalna: 43,8 m
  3. Łebsko
    1. powierzchnia: 7020,0 ha
    2. głębokość maksymalna: 6,3 m
  4. Dąbie
    1. powierzchnia: 5408 ha
    2. głębokość maksymalna: 4,2 m
  5. Miedwie
    1. powierzchnia: 3491,0 ha
    2. głębokość maksymalna: 43,8 m

Użyteczne style CSS

Dla znacznika <ol> dostępne są style specjalne, sterujące sposobem wyświetlania listy. Za pomocą stylu list-style-type można zmienić domyślny sposób numerowania:

Listing 3
  1. list-style-type: armenian|cjk-ideographic|decimal|decimal-leading-zero|georgian|hebrew|hiragana|hiragana-iroha|katakana|katakana-iroha|lower-alpha|lower-greek|lower-latin|lower-roman|none|upper-alpha|upper-latin|upper-roman|initial|inherit; /* ustawia znacznik listy numerowanej */

Przykład:

Listing 4
  1. <p>Lista pięciu największych jezior w Polsce:</p>
  2. <ol style="list-style-type: upper-roman"><li>Śniardwy</li>
  3. <li>Mamry</li>
  4. <li>Łebsko</li>
  5. <li>Dąbie</li>
  6. <li>Miedwie</li></ol>

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  1. Śniardwy
  2. Mamry
  3. Łebsko
  4. Dąbie
  5. Miedwie

Komentarze