Jednym z najczęściej występujących na stronach internetowych elementów jest wypunktowana lista. Występuje ona praktycznie na każdej stronie, choć nie koniecznie jest ona widoczna na pierwszy rzut oka. Bardzo często z jej pomocą tworzone są menu nawigacyjne. Oczywiście są one w tedy odpowiedni zmodyfikowane i nie przypominają zwykłej listy.
Przykładowe domyślne punktowane listy
Najczęściej lista wypunktowana kojarzy nam się nam z:
See the Pen lista by Aura (@Julka85) on CodePen.dark
Jak widać mamy tu dwie listy jedną wypunktowaną i drugą numerowaną. Struktura obu list jest bardzo do siebie zbliżona. Obu list elementy umieszczone są pomiędzy znacznikami <li>. Jednak używamy innego znacznika do otwierania czyli:
- <ul> – punktowana lista
- <ol> – numerowana lista
Jak zmienić wygląd wypunktowanej listy
Poprzednie dwa typy były domyślne czyli w praktyce kształt punktu dobiera za nas przeglądarka internetowa. Oczywiście nie jesteśmy ograniczeni tylko do tego typu wypunktowania. Z pomocą CSS a konkretnie list-style-type lub list-style możemy manipulować wyglądem listy.
See the Pen punkt by Aura (@Julka85) on CodePen.dark
Jeśli chcesz dowiedzieć się czegoś więcej koniecznie zajrzyj do poniższych wpisów!
