Twórcy stron internetowych używają komponentów HTML, takich jak nagłówki i stopki, Nav, Div, Image i wielu innych, aby podzielić stronę internetową i osadzać treść. Mówiąc dokładniej, „”Element to popularny komponent HTML, który zapewnia łatwy sposób podziału strony na sekcje. Niektórzy użytkownicy chcą, aby „” komponenty pionowo lub poziomo będą mogli oszczędzać przestrzeń stron internetowych.

Ten post będzie pokazał metodę tworzenia pionowo przewijanego div za pomocą CSS.

Jak tworzyć/stworzyć div pionowo przewijany z CSS?

Aby utworzyć pionowo przewijany div, wykorzystując CSS, postępuj zgodnie z podanymi instrukcjami.

Krok 1: Dodaj nagłówek

Po pierwsze, dodaj „”Tag do dodawania danych na środku strony. Następnie wstaw nagłówek, używając „

”Tag.

Krok 2: Utwórz kontener DIV w HTML

Następnie stwórz „”Pojemnik i przypisz klasę o nazwie„Scroll-Div". Następnie dodaj tekst lub akapit między tagami:

Witryna Linuxhint

Linuxhint to popularna strona internetowa tworzenia treści. Zbudował wiele produktów, które pomogą Ci dowiedzieć się o Linux, programowaniu, informatyce i nie tylko. Ta platforma zapewnia prace nad różnymi kategoriami, w tym HTML/CSS, JavaScript, Git, Windows, Dockers, Discord i wielu innych. Zapewnia kompletny przewodnik na temat tych kategorii. Użytkownicy mogą znaleźć dowolny temat związany z wymienioną kategorią. W tej sytuacji, jeśli jesteś początkującym, możesz odwołać się do wytycznych dotyczących napisania artykułu.

Wyjście

Krok 3: Style nagłówka

Uzyskaj dostęp do elementu nagłówka, określając nazwę znacznika pomiędzy tagami. Następnie zastosuj „kolor„Właściwość, aby ustawić kolor nagłówka:

H1
Kolor: RGB (81, 173, 226);

Można zauważyć, że kolor nagłówka został zmieniony:

Krok 4: Udaj Div Scrolleble

Następnie użyj „.Scroll-Div”Klasa, aby uzyskać dostęp do elementu HTML i zastosować następujące właściwości CSS:

.Scroll-Div
Wyściółka: 5px;
Margines: 5px;
kolor tła: RGB (179, 180, 233);
szerokość: 400px;
Wysokość: 120px;
przepełnienie-y: auto;
Overflow-X: ukryty;
Text-Align: Justify;

W powyższym kodzie zastosowano następujące właściwości CSS:

• "wyściółka”Jest ustawiony jako„5px„Aby przydzielić przestrzeń wewnątrz elementu DIV.
• "Margines”Jest ustawiony jako„5px„Aby stworzyć przestrzeń poza granicą DIV.
• "kolor tła”Atrybut przydziela kolor elementu na tle.
• "szerokość”Określa rozmiar pojemnika szerokości.
• "wysokość”Atrybut przydziela wysokość elementu.
• "przepełnienie-y”Służy do zmiany elementu, ustawiając jego wartość jako„automatyczny”:
• "przepełnienie-x”Jest ustawiony jako„ukryty„Aby uczynić DIV tylko przewijane pionowo.
• " tekst-align”Jest wykorzystywany do wyrównania tekstu. Na przykład wyrównaliśmy tekst jako „uzasadniać".

Można zaobserwować, że z powodzeniem uczyniliśmy DIV w pionowo Scrolleble:

Stwierdziliśmy metodę uczynienia DIV w pionowym serii przy użyciu CSS.

Wniosek

Aby uczynić DIV w pionowo przewijany za pomocą CSS, najpierw utwórz DIV z atrybutem klasowym. Atrybut klasowy służy do uzyskania dostępu do „div" element. Następnie ustaw CSS "przepełnienie-x„Nieruchomość jako„ukryty”I„ „przepełnienie-y„Nieruchomość jako„automatyczny”W atrybucie klasy, aby element div w pionie są przewijane. Ten samouczek pokazał metodę tworzenia DIV w pionowym serii przy użyciu CSS.