Przykłady stylizacji list CSS ul li. Jak rozmieścić elementy listy poziomo?

Dobry dzień!

W tym artykule dowiesz się o wszystkich możliwościach list, zrozumiesz, jak zrobić listę numerowaną, główne tagi, które pomogą Ci uczynić prostą listę punktowaną bardziej interesującą i zauważalną z dowolnymi punktorami. Po ukończeniu lekcji będziesz wiedział, gdzie mają zastosowanie listy i w jakich okolicznościach można z nich korzystać.

Ten artykuł jest trzecim w tym krótkim kursie podstaw języka HTML. Przed przeczytaniem tej lekcji polecam przejrzenie dwóch poprzednich:

Artykuł dopiero się rozpoczął i już można zauważyć użycie standardowej listy punktowanej. Na mojej stronie wygląda to dość prosto: po lewej stronie jest małe wcięcie z kreską i kwadratowym markerem. W dalszej części artykułu przyjrzymy się bliżej, czym są znaczniki, jak tworzyć liczby, a także jak zrobić własny znacznik.

W każdej części artykułu tworzeniu niektórych list będą towarzyszyć szczegółowe wyjaśnienia dotyczące wstawiania konkretnej listy.

1. Listy punktowane w HTML

Ten typ listy służy do wyliczenia w tekście zestawu elementów o podobnej wartości. Może to być lista linków związanych z tym samym tematem, szczegółowe wyjaśnienie poszczególnych części tekstu. Zobaczmy jednak, jak listy punktowane wyglądają w kodzie:

A tak to wygląda w przeglądarce:

Ryż. 1.1. Widok standardowy wypunktowanej nieuporządkowanej listy HTML w przeglądarce

1.1 Standardowe punktory dla listy punktowanej

Na powyższym obrazku (rysunek 1.1.) widać kółka na początku każdej pozycji menu. To jest znacznik. Domyślnie jest w przeglądarce jako wypełniony okrąg. W HTML istnieje kilka rodzajów znaczników: wypełnione koło, puste koło i kwadrat. Nie wymagają żadnego CSS ani nie zawierają obrazów stron trzecich:

1.2 Znacznik listy w postaci pustego koła

Znasz wartości atrybutów, ale teraz zobaczmy, jak utworzyć w kodzie listę punktowaną HTML. Z powyższej tabeli wybraliśmy drugą wartość „kółko” dla atrybutu typu i przypisaliśmy ją do naszej listy punktowanej:

<html > <głowa > <tytuł > Przykład listy punktowanej z pustym znacznikiem okręgu</tytuł> </głowa> <ciało > Gwiazdy: <ultype="kółko"> <li > Syriusz</li> <li > Arktur</li> <li > Polluks</li> <li > Betelgeza</li> <li > Słońce</li> </ul> </ciało> </html>

Zobaczmy, jak ten kod będzie wyglądał w przeglądarce:

Ryż. 1.2. Widok znacznika dla listy w postaci koła w przeglądarce

1.3 Znacznik listy w formie kwadratu

Spójrzmy również na ostatni przykład z kwadratowym znacznikiem listy HTML:

Zwróć uwagę na znacznik, stał się kwadratowy:

Ryż. 1.3. Widok znacznika dla listy w postaci kwadratu w przeglądarce

Ważna uwaga: ta metoda nie jest już używana do stylizowania list punktowanych. Istnieje wyraźne oddzielenie CSS (przeczytaj co to jest CSS) i HTML. HTML służy do oznaczania, a CSS do tworzenia atrakcyjnego wyglądu.

Kod zawierający ten atrybut podczas określania typu bieżącego dokumentu jako HTML5 (""), spowoduje błąd podczas walidacji. Jeśli nie słyszałeś, co to jest walidacja, jesteś tutaj - .

Błąd będzie następujący:

Ryż. 1.4. Błąd w walidatorze podczas używania atrybutu „typ” listy

Wymyśliliśmy listy punktowane. Przejdźmy teraz do list numerowanych, a następnie spójrzmy na listy zagnieżdżone i kilka gotowych przykładów, które są najczęściej używane na prawdziwych witrynach.

2. Listy numerowane w HTML

W przeciwieństwie do poprzedniego typu list, listy numerowane mają jeden ważna cecha: automatycznie odkładają numerację. Jest to przydatne, gdy trzeba ponumerować dużą listę. Ręczne zajmie to dużo czasu, a nadal możesz zbłądzić. Lista numerowana jest określana za pomocą znacznika. Jak to wygląda w praktyce:

Przykład listy numerowanej:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html > <głowa > <tytuł > Przykład standardowej listy numerowanej</tytuł> </głowa> <ciało > Od jednego do pięciu: <ol > <li > Pierwszy</li> <li > druga</li> <li > Trzeci</li> <li > Czwarty</li> <li > Piąty</li> </ol> </ciało> </html>

Tak wygląda lista numerowana. Ustawienia domyślne w wyszukiwarce:

Ryż. 2.1. Lista numerowana w przeglądarce ze standardowymi ustawieniami

Podobnie jak jego poprzednik (lista punktowana) ma własne style wyświetlania liczb. Normalna numeracja nie jest jedynym typem punktora na liście numerowanej w HTML.

2.1 Standardowe punktory dla listy numerowanej

Tutaj mamy do wyboru nie trzy rodzaje oznaczników, ale pięć:

Nazwa znacznika	Wartość atrybutu „typ”	Przykład listy
Znaczniki w postaci cyfr arabskich	1	Badminton Baseball
Markery w linii litery łacińskie	a	Chomolungma Chogori Kanczendzonga
Markery w postaci wielkich liter łacińskich	A	Szczytowy pion Aleja napadów szału Insano
Małe znaczniki cyfr rzymskich	i	Morze Filipińskie Morze Arabskie Rafa koralowa
Wielkie znaczniki z cyframi rzymskimi	i	czerwony Zielony Niebieski

2.2 Własna numeracja na liście HTML

Oprócz zwykłego wyjścia listy numerowanej, możemy również rozpocząć naszą numerację od dowolnej liczby. Aby to zrobić, musisz ustawić dodatkowy atrybut"początek" . Ta numeracja działa na wszystkich typach znaczników dla list numerowanych. Jak to wygląda w praktyce:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html > <głowa > <tytuł > Numeracja niestandardowa dla listy numerowanej</tytuł> </głowa> <ciało > Numerację zaczynamy od dwunastu: <oltype="a"start="12"> <li > Dwanaście</li> <li > Trzynaście</li> <li > Czternaście</li> <li > Piętnaście</li> <li > Szesnaście</li> </ol> </ciało> </html>

Oto jak wyglądałby na prawdziwej stronie:

Ryż. 2.2. Numeracja z dowolnej liczby z listy numerowanej

Na powyższym obrazku ponumerowaliśmy listę zaczynając od dwunastu, jednocześnie wykonując znaczniki w postaci małych liter łacińskich. Teraz myślę, że stało się jasne, jak wykorzystać te atrybuty w swoich projektach.

Przejdźmy teraz do zagnieżdżonych list HTML.

3. Jak zrobić wielopoziomową (zagnieżdżoną) listę w HTML

Listy wielopoziomowe są używane na stronie w menu budowania. To menu najczęściej wygląda jak menu rozwijane w dół (lekcja włączona) lub w lewo lub w prawo. Takie menu umożliwiają przechowywanie innych elementów menu w kompaktowej formie.

Na przykładzie modeli samochodów zbudujemy wielopoziomową listę w HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<html > <głowa > <tytuł > Zagnieżdżona lista punktowana w formacie HTML</tytuł> </głowa> <ciało > <ul > <li > Citroën<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </ciało> </html>

Zwróć uwagę, jak wygląda lista wielopoziomowa w przeglądarce:

Ryż. 3.1. Przykładowa lista warstw w HTML

Stworzyliśmy wielopoziomową listę za pomocą punktowanej (tag

Ale możemy się zjednoczyć listy wielopoziomowe z ponumerowanymi i oznaczonymi w następujący sposób:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <głowa > <tytuł > Listy numerowane, punktowane i warstwowe w HTML</tytuł> </głowa> <ciało > <ul > <li > Pierwsza grupa tulipanów<ol > <li > Pierwsza klasa<ul > <li > Proste wczesne tulipany</li> </ul> </li> <li > Druga klasa<ul > <li > tulipany frotte</li> </ul> </li> </ol> </li> </ul> </ciało> </html>

W powyższym przykładzie mamy podwójne zagnieżdżanie (2 poziomy). Najpierw wstawiamy listę dwóch klas tulipanów, mamy ją ponumerowaną. Następnie lista punktowana jest zagnieżdżana w każdym elemencie listy numerowanej.

Zobaczmy jak to wygląda w przeglądarce:

4. Przydatne wykazy HTML

To są informacje, które wymagają zrozumienia właściwości CSS. Aby to zrobić, polecam przestudiowanie następujących lekcji:. Wszystkie przykłady będą natychmiast z kod źródłowy i podzielone na zakładki HTML (struktura), CSS (style) i Wynik (wynik).

4.1 Jak przekształcić listę HTML w ciąg?

Przekształcenie listy HTML w ciąg znaków może być potrzebne podczas tworzenia menu poziomego. Zrobienie tego jest bardzo proste:

4.2 Jak zrobić listę HTML bez ikony

Za to odpowiada właściwość list-style-type w CSS (więcej informacji):

4.3 Jak wyśrodkować listę w HTML

Element listy jest elementem blokowym, więc musi być wyśrodkowany za pomocą marże. Ale jest jeden ważny punkt- musimy wyraźnie określić szerokość, aby wyrównanie zadziałało:

4.4 Jak zrobić listę w HTML ze zdjęciami

Sama właściwość CSS list-style-image jest wystarczająca. Wewnątrz adresu URL podaj adres do ikony. Chcę tylko zauważyć, że lepiej od razu wybrać mały obrazek, ponieważ od tego zależy wysokość linii listy:

4.5 Niestandardowy znacznik HTML listy punktowanej

W takim przypadku ikony czcionek muszą być uwzględnione z wyprzedzeniem (na przykład FontAwesome ). Następnie możesz zrobić dowolną ikonę zamiast standardowego znacznika:

4.6 Jak zrobić listę wielokolumnową w HTML

Aby utworzyć listę w wielu kolumnach, użyjemy właściwości CSS column-count (właściwość ta jest obsługiwana tylko w następujące przeglądarki: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Musisz również ustawić wysokość listy, aby zobaczyć podział na wiele kolumn:

5. Ćwicz z listami

Na poniższym filmie możesz zobaczyć całą pracę z listami HTML w praktyce:

Po usunięciu podstaw przyjrzymy się teraz bliżej elementom używanym do nadawania struktury i znaczenia różnym częściom projektu. Jak ktoś nie wie to ul i li to dużo Najlepszym sposobem niż zwykły tekst, ponieważ gdy tekst jest zawijany, zwłaszcza w telefon komórkowy, jest idealnie wcięty i nie owija się wokół znacznika.

Listy są uważane za świetny sposób prezentowania informacji na stronach, ponieważ są łatwe do odczytania i dobrze wyglądają. Wiele osób wydaje się myśleć, że wypunktowanie to małe obrazki, ale w rzeczywistości wszystkie są tworzone za pomocą dość prostego kodu HTML. Możesz wkleić różne rodzaje listy, jeśli chcesz, pamiętaj tylko o ich prawidłowym zamknięciu. Możesz bawić się tekstem, który chcesz we wszystkich tych poleceniach list.

Musisz również wiedzieć, że listy początkowo zawierają kilka elementów:

1 . nieuporządkowane informacje.
2 . Zamówione informacje.
3 . Definicje.

Zacznijmy instalację:

1. Opcja:

Element listy

Unikalna lista

Oryginalne aukcje

ZORNET.RU - Webmaster

Kolejna lista

(Ksangelopan)
margines: 19px 0 0;
dopełnienie:0;
styl listy: brak;
resetowanie licznika:li;
}
.ksangelopan li (
obramowanie: 2px stałe #3575ad;
tło: #d7dee4;
pozycja: względna;
margines-dolny: 17px;
dopełnienie: 15px 9px;
}
.ksangelopan li:najedź (
indeks z: 1;
}
.ksangelopan li:przed (
obramowanie: pełne 2px #2270b3;
pozycja: bezwzględna;
góra: -14px;
wypełnienie: 3px 9px;
rozmiar czcionki: 11px;
grubość czcionki: pogrubiona;
kolor: #246eaf;
tło: #f2f4f7;
kontr-przyrost: li;
zawartość: licznik(li);
-czas trwania przejścia na webkit: 0,4 s;
czas przejścia: 0,4s;
}
.ksangelopan li:najechanie:przed (
tło: #2672b3;
kolor: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: przetłumacz(-11px, 0);
-o-transform: przetłumacz(-11px, 0);
transformacja: przetłumacz(-11px, 0);
}
.ksangelopan li:po (
zawartość: "";
pozycja: bezwzględna;
czas przejścia: 0,3s;
-webkit-transition-property: szerokość;
właściwość przejściowa: szerokość;
indeks z: -1;
tło: #FFF;
wzrost: 100%;
po lewej: 0;
góra: 0;
szerokość: 0;
}
.ksangelopan li:najechanie:po (
szerokość: 100%
}

2 Druga opcja:

Element listy

Unikalna lista

Oryginalne aukcje

ZORNET.RU - Webmaster

Kolejna lista

Beleduzlopamges (
margines-dolny: 8px;
dopełnienie:0;
styl listy: brak;
resetowanie licznika:li;
}
.beleduzlopamges li (
pozycja: względna;
obramowanie: stałe 2px #195588;
tło: #eff3f7;
padding: 15px 19px 15px 27px;
margines: 12px 0 12px 40px;
-czas trwania przejścia na webkit: 0.3s;
czas przejścia: 0,3s;
}
.beleduzlopamges li:hover(
tło: #FFF;
}
.beleduzlopamges li:przed (
wysokość linii: 32px;
pozycja: bezwzględna;
góra: 4px;
po lewej: -39px;
szerokość: 39px
wyrównanie tekstu: środek;
rozmiar czcionki: 16px;
grubość czcionki: pogrubiona;
kolor: #f9f5f5;
tło: #275b88;
kontr-przyrost: li;
zawartość: licznik(li);
czas przejścia: 0,2s;
}
.beleduzlopamges li:hover:przed (
szerokość:46px;
}
.beleduzlopamges li:po (
pozycja: bezwzględna;
po lewej: 0;
góra: 4px;
zawartość: "";
wysokość: 0;
szerokość: 0;
obramowanie: 16px stałe przezroczyste;
kolor lewego obramowania: #275b88;
-czas trwania przejścia na webkit: 0,2s;
czas przejścia: 0,2s;
}
.beleduzlopamges li:najechanie:po (
margines lewy: 6px;
}

3 Trzecia opcja:

Skrypty dla uCoz

Szablony dla uCoz

Projekt strony internetowej

Style dla strony

Stylizacja w CSS

Nizualisanelag (
dopełnienie:0;
styl listy: brak;
resetowanie licznika:li;
}
.nizualisanelag li(
pozycja: względna;
padding: 9px 17px 17px 25px;
margines lewy: 39px;
czas przejścia: 0,2s;
kursor: wskaźnik;
grubość czcionki: pogrubiona;
kolor: #343638;
}
.nizualisanelag li:przed (
obramowanie: 3px stałe przezroczyste;
wysokość linii: 35px;
pozycja: bezwzględna;
góra: 0;
lewy:-29px;
szerokość:41px;
wyrównanie tekstu:środek;
rozmiar czcionki: 14px;
grubość czcionki: pogrubiona;
kolor: #619dce;
kontr-przyrost: li;
zawartość: licznik(li);
czas przejścia: 0,3s;

rozmiar pudełka: obramowanie-pudełko;
}
.nizualisanelag li:hover:przed (
kolor: #337AB7;
}
.nizualisanelag li:po (
pozycja: bezwzględna;
góra: 0;
po lewej: -29px;
szerokość: 41px
wysokość: 41px;
obramowanie: stałe 5px #468bd0;
promień graniczny: 50%
zawartość: "";
krycie: 0,5
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
rozmiar pudełka: obramowanie-pudełko;
}
.nizualisanelag li:hover:po (
animacja: 500ms easy-in-out 0s bounceIn;
krycie: 1
}

@keyframes bounceIn(
0% {
krycie: 0
transformacja: skala3d(.3, .3, .3);
}
20% {
transformacja: skala3d(1.3, 1.3, 1.3);
}
40% {
transformacja: scale3d(.9, .9, .9);
}
60% {
krycie: 1
transformacja: scale3d(1.03, 1.03, 1.03);
}
80% {
transformacja: skala3d(.97, .97, .97);
}
do(
krycie: 1
transformacja: scale3d (1, 1, 1);
}
}

4 Czwarta opcja:

Pierwszy element strony

Drugi element strony

Trzeci element strony

Czwarty element strony

Piąty element strony

dopełnienie:0;
styl listy: brak;
}
.kudezamuden li(
dopełnienie:6px;
}
.kudezamuden li:przed (
dopełnienie-prawo: 11px;
grubość czcionki: pogrubiona;
kolor: #4979a0;
zawartość: "\2606";
czas przejścia: 0,4s;
}
.kudezamuden li:hover:przed (
kolor: #235e90;
zawartość: "\2605";
}

Poprzednia wersja

Ogólnie jest to mały wybór list, które pozwolą webmasterowi zrobić piękną listę na portalu, na której sam może ją bardziej uporządkować, tak jak sam chce to zobaczyć.

Jeśli chcesz umieścić elementy na liście numerowanej zamiast na liście punktowanej, zostanie tutaj użyty uporządkowany kod HTML. Ta lista jest tworzona przy użyciu tagu ol. Numeracja zaczyna się od jednego i zwiększa się o jeden dla każdego kolejnego uporządkowanego elementu listy ze znacznikiem li.

Język znaczników hipertekstowych HTML ma znacznik

nowoczesne przeglądarki

Składnia tagów

Przedmiot 1

Pozycja #2

Pozycja #3

...

Ten kod przekłada się na listę punktowaną na stronie:

Przedmiot 1
Pozycja #2
Pozycja #3

Etykietka

wymaga użycia tagu zamykającego

Aby utworzyć elementy listy, użyj para tag. Pomiędzy tagami otwierającymi i zamykającymi znajdują się pojedyncze słowa, frazy, akapity, obrazy, fragmenty kodu i wiele więcej, które stanowią zawartość listy punktowanej.

Jaka może być zawartość listy punktowanej?

Może to być wiele różnych tekstów, w tym pojedyncze słowa, frazy i akapity, obrazy, listy zagnieżdżone, fragmenty kodu php i wiele więcej, które wymagają prostego tagowania.

Każdy element listy punktowanej ma domyślnie wcięcie 40 pikseli w prawo. Używając stylów CSS możemy zmienić sposób wyświetlania ta lista według własnego uznania. Etykietka

Załączniki typu lista na liście są dozwolone

Na przykład

Przedmiot 1

Pozycja #2-1

Pozycja #2-2

Pozycja #2-3

Pozycja #3

...

Atrybuty i właściwości tagów

Powszechny atrybut tagu

1. type="disc" - znacznik w postaci wypełnionego koła (wartość domyślna). Przykład dysku był nieco wyższy.

2. type="circle" - przezroczysty znacznik koła

Na przykład:

Przedmiot 1

Pozycja #2

Przedmiot 1
Pozycja #2

3. type="kwadrat" - znacznik kwadratowy

Na przykład:

Przedmiot 1

Pozycja #2

A oto jak to wygląda na stronie:

Przedmiot 1
Pozycja #2

W CSS typ znacznika określa się za pomocą atrybutu list-style-type:

...

Zastanów się, jakie wartości może przyjąć list-style-type:

dysk - znacznik w formie koła (przykład był powyżej)
okrąg - znacznik w postaci przezroczystego koła (przykład był powyżej)
kwadrat - znacznik w postaci kwadratu (przykład był powyżej)
dziesiętny - znacznik w postaci listy numerowanej cyframi arabskimi: 1, 2, 3, ...
dziesiętne-leading-zero - znacznik w postaci numerowanej listy cyfr arabskich z wiodącym zerem: 01, 02, 03, ...
dolna rzymska - znacznik w postaci listy numerowanej w alfabecie łacińskim małymi literami: i, ii, iii, iv, v
górnorzymski - znacznik w postaci listy numerowanej w alfabecie rzymskim wielkimi literami: I, II, III, IV, V
dolna łacina - znacznik w formie listy w alfabecie łacińskim małymi literami: a, b, c, d, ...
górna łacina - znacznik w formie listy w alfabecie łacińskim wielkimi literami: A, B, C, D, ...
small-greek - znacznik w formie listy w alfabecie greckim małymi literami
górnogrecki - znacznik w postaci spisu alfabetu greckiego wielkimi literami

Uwaga 2

Atrybut może być przypisany jako sam tag

. Podczas ustawiania atrybutu w tagu

Kod wygląda tak:

Przedmiot 1

Pozycja #2

Pozycja #3

Przedmiot 1
Pozycja #2
Pozycja #3

Zmiana znaczników tagów
z CSS

Elementy listy punktowanej utworzone przez tag

Przedmiot 1

Pozycja #2

Pozycja #3

A tak to wygląda na stronie:

Przedmiot 1
Pozycja #2
Pozycja #3

C za pomocą CSS możemy określić inne rodzaje wyświetlania znaczników. Należy jednak pamiętać, że ustawiając dowolny styl tagu

Witajcie drodzy czytelnicy! Dzisiaj, jako kontynuację serii artykułów pod nagłówkiem „Podstawy HTML”, chcę Wam przedstawić algorytm tworzenia listy html z pomocą tagi ul i li (lista punktowana), ol i li (lista numerowana), dl, dt, dd (lista definicji).

Teraz będę dalej zapoznawał Cię z najczęściej używanymi tagi html, które służą do tworzenia list na stronach witryny. Jeśli ktoś nie wie, co to jest, to po otrzymaniu poniższych informacji prawdopodobnie od razu zrozumie, o co chodzi, ponieważ taka forma prezentacji materiału jest bardzo powszechna.

Wypunktowane listy HTML - tagi ul i li

Lista punktowana zdefiniuje znacznik ul. Pomiędzy otwierającym i zamykającym znacznikiem ul znajdują się elementy listy, których zawartość z kolei musi być umieszczona między otwierającym i zamykającym znacznikiem li. Od razu zauważam, że tag ul jest sparowany (obecność tagu otwierającego i zamykającego), a także tag blokowy, czyli tworzy kontener zawierający elementy (linie) tworzone za każdym razem przez tag li. W związku z tym znacznik li jest sparowany i wbudowany.

Domyślna wygląd znacznik jest reprezentowany przez wypełnione kółko. Możesz jednak zmienić jego wygląd, stosując atrybut type, który ma następujące wartości: dysk, koło, kwadrat. Wartość dysku (która określa wygląd znacznika jako wypełnionego koła) jest domyślna. Oznacza to, że jeśli nie określono atrybutu typu, znacznik będzie wyglądał jak wypełnione koło. Jeśli dodamy te atrybuty do tagu ul, otrzymamy następujące opcje:

Oczywiście każdemu znacznikowi osobnego elementu listy punktowanej można nadać własny wygląd, ustawiając odpowiednie wartości atrybutu type.

Numerowane listy HTML - tagi ol i li

Zobaczmy teraz, jak tworzy się listę numerowaną za pomocą tagów ol (tagów blokowych i parowych, analogicznie do ul). Znacznik li działa tutaj również jako znacznik definiujący elementy listy numerowanej html. Lista numerowana to zbiór ponumerowanych elementów. Typ numeracji jest zdefiniowany przez atrybut type, który może przyjmować następujące wartości:

A - wielkie litery łacińskie;
a - małe litery łacińskie;
I - duże cyfry rzymskie;
i - małe cyfry rzymskie;
1 - cyfry arabskie

	1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji
1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji	1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji
1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji	1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji
1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji	1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji
1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji	1 numerowana pozycja na liście 2 elementowa lista numerowana Lista numerowana 3 pozycji

Możliwe jest również dostarczenie uporządkowanej listy, w której elementy są ponumerowane w odwrotnej kolejności, na przykład: 3, 2, 1. Odbywa się to za pomocą atrybutu Reserve znacznika ol.

Możliwe jest również rozpoczęcie listy punktowanej nie od 1, ale od dowolnej innej liczby. Aby to zrobić, możesz użyć atrybutu start i nie ma znaczenia, jaka wartość atrybutu type jest ustawiona. Zobacz przykład użycia atrybutu name w połączeniu z różnymi wartościami atrybutu type (1 i I):

Listy definicji HTML - znaczniki dl, dd, dt

Innym rodzajem list html jest lista definicji. Powstaje w następujący sposób. Zawartość tej listy znajduje się między otwierającym i zamykającym znacznikiem dl, które tworzą kontener. Znacznik dt definiuje termin, a dd opis tego terminu.

Jak widać, zawartość znacznika dt, czyli terminu, jest przesunięta w lewo, a zawartość znacznika dd, który jest definicją danego terminu, jest napisana kursywą. Wszystko to osiąga się dzięki zastosowaniu różnych style css o czym z pewnością będziemy dyskutować w przyszłych publikacjach.

Nawiasem mówiąc, współczesne realia są takie, że język html nie można rozpatrywać w oderwaniu od, dlatego, aby nie przegapić tych ważnych materiałów, subskrybuj aktualizacje bloga przez kanał RSS lub e-mail. Na tym kończy się temat dzisiejszego artykułu, jeśli otrzymałeś niezbędne informacje, nie odmawiaj korzystania z przycisków sieci społecznościowych.