Strony internetowe z układem płynu lub szerokości cieczy Użyj całej szerokości przeglądarki. Wynika to z faktu, że jedna lub więcej kolumn musi być automatycznie zmieniona, aby pasować do rozmiaru okna przeglądarki. Tak więc układ płynu jest bardziej przyjazny, ponieważ dostosowuje się do rozmiaru ekranu przeglądarki. Mówiąc dokładniej, aby uzyskać układ szerokości płynu, szerokość elementu należy określić w „odsetek".

Ten blog poprowadzi Cię o utworzeniu układu o stałej szerokości z CSS.

Jak stworzyć układ szerokości płynów za pomocą CSS?

W HTML najpierw dodaj element DIV o nazwie klasy „szerokość płynu". Następnie dodaj

I

elementy, aby dodać trochę treści.

Html

Witamy w Linuxhint

Linuxhint to najlepsza witryna samouczka online. Jeśli chcesz nauczyć się programowania bash, jesteś we właściwym miejscu.

Dodanie powyższego kodu do pliku HTML wyświetli następujące dane wyjściowe:

Struktura strony została zakończona. Teraz, w następnej sekcji, elementy HTML zostaną zaprojektowane przy użyciu kilku właściwości CSS.

Styl wszystkie elementy

*
margines: 0px;
Wyściółka: 0px;

Wszystkie elementy HTML określone w pliku będą miały margines 0px i wyściółka 0px.

Stylowa Płynna szerokość szerokości

.Płynna szerokość
kolor tła: RGB (238, 238, 238);
Szerokość: 90%;
Margines: Auto;
Wysokość: 100 VH;

Poniżej znajduje się opis właściwości stosowanych do szerokości płynu DIV:

• ".szerokość płynu”Jest wykorzystywany do dostępu do szerokości płynów klasowych. Tutaj " . „Znak jest znany jako selektor klasowy.
• "kolor tła„Właściwość określa kolor tła elementu.
• "szerokość„Właściwość określa szerokość elementu.
• "margines„Obiekt dodaje przestrzeń wokół elementów.
• "wysokość„Właściwość ustawia wysokość elementu.

Podając wyżej wymieniony kod, dane wyjściowe pojawią się w następujący sposób:

Można zauważyć, że rozmiar Div o szerokości płynu jest dostosowywany zgodnie z rozmiarem ekranu. Oznacza to, że elementy określone w wartościach procentowych ustawią ich szerokość zgodnie z rozdzielczością ekranu.

W ten sposób możemy stworzyć układ szerokości płynu w CSS.

Wniosek

Deweloperzy muszą być bardzo ostrożni podczas projektowania dowolnej aplikacji. Muszą pamiętać, jak chcą, aby ich aplikacja pojawiła się na różnych urządzeniach. Jednym z rzeczy jest ustawienie układu strony internetowej. Ponadto, aby utworzyć układ przyjazny dla użytkownika i responsywne, „odsetek„Użytkownik musi być używany. Ten blog z powodzeniem wyjaśnił, jak stworzyć układ szerokości płynnej w CSS.