Wstawianie list wypunktowanych w HTML-u

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

Wstawianie listy wypunktowanej w kodzie strony

Oto przykład utworzenia listy wypunktowanej:

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

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  • Śniardwy
  • Mamry
  • Łebsko
  • Dąbie
  • Miedwie

Listy można zagnieżdżać:

Listing 2
  1. <p>Lista pięciu największych jezior w Polsce:</p>
  2. <ul><li>Śniardwy
  3. <ul><li>powierzchnia: 11487,5 ha</li>
  4. <li>głębokość maksymalna: 23,4 m</li></ul>
  5. </li>
  6. <li>Mamry
  7. <ul><li>powierzchnia: 9851,0 ha</li>
  8. <li>głębokość maksymalna: 43,8 m</li></ul>
  9. </li>
  10. <li>Łebsko
  11. <ul><li>powierzchnia: 7020,0 ha</li>
  12. <li>głębokość maksymalna: 6,3 m</li></ul>
  13. </li>
  14. <li>Dąbie
  15. <ul><li>powierzchnia: 5408 ha</li>
  16. <li>głębokość maksymalna: 4,2 m</li></ul>
  17. </li>
  18. <li>Miedwie
  19. <ul><li>powierzchnia: 3491,0 ha</li>
  20. <li>głębokość maksymalna: 43,8 m</li></ul>
  21. </li></ul>

Wynik powyższego kodu:

Lista pięciu największych jezior w Polsce:

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

Użyteczne style CSS

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

Listing 3
  1. list-style-type: disc|circle|rect|none; /* ustawia znacznik listy wypunktowanej */

Przykład:

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

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  • Śniardwy
  • Mamry
  • Łebsko
  • Dąbie
  • Miedwie

Istnieje również możliwość stworzenia własnego pliku graficznego z znacznikiem i jego podpięcia w następujący sposób:

Listing 5
  1. list-style-image: url('znacznik.gif');

Kolejny styl to list-style-position sterujący miejscem wyświetlania znaczników (razem z tekstem, czy oddzielnie):

Listing 6
  1. list-style-position: inside|outside|initial|inherit;

W końcu znacznik list-style umożliwiający połączenie list-style-image i list-style-type:

Listing 7
  1. list-style: square url('znacznik.gif');

Komentarze