Webseiten mit einem Flüssigkeits- oder Flüssigbreitenlayout verwenden die gesamte Breite des Browsers. Dies liegt daran. Das flüssige Layout ist also freundlicher, weil es sich an die Bildschirmgröße des Betrachters anpasst. Insbesondere muss die Breite des Elements ein flüssiges Breitenlayout des Elements angegeben werden. “Prozentsatz”.

In diesem Blog wird Sie über das Erstellen eines Layouts fester Breite mit CSS geleitet.

So erstellen Sie mit CSS flüssiges Breitenlayout?

Fügen Sie in HTML zunächst ein Div -Element mit einem Klassennamen hinzu “Flüssigkeitsbreite”. Dann füge hinzu

Und

Elemente, um Inhalte hinzuzufügen.

Html

Willkommen bei LinuxHint

LinuxHint ist die beste Online -Tutorial -Website. Wenn Sie Bash -Programmierung lernen möchten, sind Sie am richtigen Ort.

Das Hinzufügen des obigen Codes zur HTML -Datei zeigt die folgende Ausgabe an:

Die Struktur der Seite wurde abgeschlossen. Jetzt, im nächsten Abschnitt, werden die HTML -Elemente mit mehreren CSS -Eigenschaften gestaltet.

Stil alle Elemente

*
Rand: 0px;
Polsterung: 0px;

Alle in der Datei angegebenen HTML -Elemente haben eine 0pX -Rand und eine 0px.

Stilflüssigkeitsbreite Div

.Flüssigkeitsbreite
Hintergrundfarbe: RGB (238, 238, 238);
Breite: 90%;
Rand: Auto;
Höhe: 100VH;

Das Folgende ist die Beschreibung der Eigenschaften, die auf die Div-Fluid-Breite angewendet werden:

• “.Flüssigkeitsbreite”Wird verwendet, um auf die Klassenflüssigkeitsbreite zuzugreifen. Hier das " . ”Zeichen wird als Klassenauswahl bezeichnet.
• “HintergrundfarbeEigenschaft bestimmt die Hintergrundfarbe des Elements.
• “BreiteEigenschaft gibt die Breite des Elements an.
• “RandDas Eigentum fügt Platz um die Elemente um.
• “HöheEigenschaft legt die Höhe des Elements fest.

Durch die Bereitstellung des oben genannten Codes wird die Ausgabe wie folgt angezeigt:

Es ist ersichtlich, dass die Größe der Flüssigkeitsbreiten-DIV entsprechend der Bildschirmgröße eingestellt wird. Dies bedeutet, dass die in Prozent angegebenen Elemente ihre Breite entsprechend der Bildschirmauflösung festlegen werden.

So können wir in CSS ein flüssiges Breitenlayout erstellen.

Abschluss

Die Entwickler müssen beim Entwerfen einer Anwendung sehr vorsichtig sein. Sie müssen berücksichtigen, wie ihre Anwendung auf verschiedenen Geräten erscheint. Eine solche Sache ist, das Layout der Webseite festzulegen. Darüber hinaus, um ein Layout benutzerfreundlich und reaktionsschnell zu machen, das “Prozentsatz”Einheit muss verwendet werden. In diesem Blog wurde erfolgreich erklärt.