Jak używać znacznika div w HTML do podziału strony?

Jak używać znacznika div w HTML do podziału strony?
W HTML tag jest najważniejszym tagiem i jest wykorzystywany w większości dokumentów. Tag jest uważany za kontener dla innych znaczników HTML. Dlatego można go zastosować do zastosowania wielu tagów HTML na żądanej części dokumentu.

Tag można również użyć do podziału strony HTML na wiele sekcji. Ten zapis ma na celu poprowadzenie, w jaki sposób można użyć tagów DIV do podziału strony. Oczekuje się następujących wyników:

  • Jak używamy tagów DIV do dzielenia stron HTML w sekcjach poziomych?
  • Jak używamy tagów DIV do dzielenia stron HTML w sekcjach pionowych?

Jak używamy tagu div do podziału strony HTML w sekcjach poziomych?

W HTML tag działa jak sekcja dla danych na stronie HTML. Aby podzielić stronę na sekcje, musisz napisać wymagane znaczniki HTML wewnątrz znacznika. Zobaczmy praktyczny przykład poniżej, aby zrozumieć podział stron HTML według tag.

Html




Pierwszy dokument



Dzielenie strony HTML za pomocą znacznika


Sekcja 1
Sekcja 2
Sekcja 3

W tym kodzie użyliśmy trzech tagów. Te tagi są powiązane z trzema klasami CSS. Kod CSS zastosowany w powyższym kodzie HTML znajduje się poniżej:

CSS

div

Text-Align: Center;
Rozmiar czcionki: 30px;
kolor biały;
Wyściółka: 10px;
Wyświetlacz: Flex;
Wyrównanie: Center;
Justify-Content: Center;
Wysokość: 150px;
Szerokość: 98%;

.jeden

kolor tła: Limegreen;

.dwa

kolor tła: pomarańczowy;

.trzy

kolor tła: Hotpink;

W części CSS celowaliśmy we wszystkie trzy tagi, aby sformatować zawartość wszystkich divs. Aby dać różne kolory każdemu divowi, trzy klasy „jeden”,„dwa", I "trzy”Są tworzone.

Wyjście

Wyjście pokazuje, że strona internetowa jest podzielona na trzy sekcje za pomocą znacznika HTML.

Jak używać znacznika DIV do podziału strony HTML w sekcjach pionowych?

W HTML możemy użyć znacznika, aby podzielić stronę internetową na sekcje pionowe. Zobaczmy praktyczny przykład poniżej, aby zrozumieć podział pionowy strony HTML za pomocą znacznika.

Html




Pierwszy dokument



Dzielenie strony HTML za pomocą znacznika


Sekcja 1
Sekcja 2
Sekcja 3

W tym kodzie utworzyliśmy trzy sekcje za pomocą znacznika. Aby uzyskać lepszą prezentację, zastosowaliśmy następujące CSS na tagach DIV:

CSS

div

Text-Align: Center;
Rozmiar czcionki: 30px;
kolor biały;
Wyściółka: 10px;
Wyświetlacz: Flex;
Wyrównanie: Center;
Justify-Content: Center;
Wysokość: 500px;
Szerokość: 30%;

.jeden

kolor tła: Limegreen;
float: lewy;

.dwa

kolor tła: pomarańczowy;
float: lewy;

.trzy

kolor tła: Hotpink;
float: lewy;

W części CSS kierujemy wszystkie Divy i używamy różnych właściwości, aby nadać wysokości, szerokość, wyściółkę i rozmiar czcionki tła zawartości DIV. Obserwuje się, że sekcje pionowe są tworzone za pomocą platforma właściwość CSS i jego wartość jest ustawiona lewy.

Wyjście

Wyjście pokazuje, że strona internetowa jest podzielona na trzy sekcje za pomocą znacznika HTML.

Wniosek

W HTML możemy podzielić całą stronę internetową na sekcje, używając znacznika wraz z CSS. Domyślnie znacznik dzieli stronę internetową na sekcje poziome. Możesz jednak użyć właściwości pływaka CSS, aby stworzyć pionowe sekcje strony internetowej. Postępując zgodnie z tym przewodnikiem, możesz zastosować tag, aby podzielić stronę HTML.