Das elastische, flüssige CSS-Layout trifft auf unterschiedliche Inhaltsanzeigen

Da die Monitore der Benutzer heute immer größer werden, ist das bisherige 1024*768-Vollbild-Layout immer veralteter. Für Benutzer mit großen Bildschirmen vermittelt der leere Raum auf beiden Seiten auf den ersten Blick einen seriösen Eindruck Verschwendung, als Webdesigner haben Sie die Verantwortung, dieser Benutzergruppe eine gute Benutzeroberfläche zu bieten.

Um diese Bildschirmverschwendung zu reduzieren, ist die Verwendung eines elastischen Fluid-Layouts natürlich die beste Lösung. Es kann den Bildschirmraum voll ausnutzen und Inhalte unabhängig von der Auflösung im Vollbildmodus anzeigen. Aufgrund verschiedener Einschränkungen sind aktuelle Webseiten jedoch noch nicht bereit, ein flexibles, elastisches Layout vollständig zu übernehmen (insbesondere die mutwillige Missachtung von Standards durch Browserhersteller und die unvollständige Unterstützung von CSS-Standards usw.). Als Vermittler zwischen Anwendern und Herstellern können wir uns nur mit einer kompatiblen Mentalität auf die Kluft zwischen beiden einstellen. Daher gibt es als Übergangslösung ein solches Layout: elastisches + Layout mit fester Breite.

Die hier erwähnte Elastizität bedeutet, dass sich der Hintergrund an die Bildschirmbreite anpasst, während die feste Breite bedeutet, dass der Textinhalt entweder im Breitbild- oder im Schmalbildformat automatisch zentriert werden kann. Überleben Sie in den Rissen, um den Anforderungen von Benutzern mit unterschiedlichen Größenauflösungen gerecht zu werden. Das unten gezeigte Design ist ein typisches Beispiel.

Kommen wir ohne weitere Umschweife zur Sache. Erstellen wir eine Layoutstruktur wie diese.

Erstellen Sie zunächst die Strukturebene:

Analysieren Sie die Strukturebene. Eine Webseite besteht im Allgemeinen aus drei Teilen: Kopfzeile, Inhaltsbereich und Fußzeile. Wir platzieren die Kopfzeile und den Inhalt in einer Containerebene, die als Wrapper bezeichnet wird. Warum ist es so gestaltet? Wir möchten, dass diese Fußzeile ganz unten steht, auch wenn der Inhaltsbereich weniger als einen Bildschirm umfasst.

Wir setzen die Breite der beiden Container Wrapper und Footer auf 100 %, sodass sie sich automatisch an die Breite des Bildschirms anpassen. Stellen Sie außerdem den Kopfbereich auf 100 % Breite ein. Auf diese Weise können wir ein horizontal kachelbares Bild in die Kopf- und Fußzeile einfügen, sodass der Hintergrund der Kopf- und Fußzeile auf einem großen Bildschirm den gesamten Bildschirmbereich horizontal ausfüllen kann.

Was den Haupttextinhalt betrifft, so besteht unser allgemeiner Ansatz darin, ihn bei größerer Auflösung in der Mitte anzuzeigen und auf beiden Seiten Leerraum zu lassen. Da der Header-Bereich auf 100 % Breite eingestellt wurde, fügen wir dem Header eine weitere Containerebene hinzu, die als Träger des eigentlichen Header-Textinhalts dient. Anschließend legen wir einen festen Breitenwert fest, beispielsweise 960 Pixel und lass es sich zentrieren.

Auf diese Weise schwebt der Haupttext des Seitenkopfes auf der oberen Ebene des Kopfzeilenelements. Diese beiden Ebenen können mit unterschiedlichen Hintergrundbildern versehen werden Header-Effekt, der eine größere Bildschirmauflösung automatisch anpassen kann.

Ebenso lässt sich mit dieser Methode auch der Footer umsetzen.

In der Strukturebene oben habe ich diese Methode im mittleren Inhaltsbereich nicht verwendet, sondern eine kleine Änderung vorgenommen. Wir können sehen, dass es im Inhaltsbereich keinen eingebetteten Container gibt, sondern nur einen Container. Was sollen wir tun, wenn wir verhindern möchten, dass die beiden Seiten des Textes bei hoher Auflösung leer erscheinen? Natürlich können Sie die Kopf- und Fußzeilenmethoden verwenden und dem Inhalt ein Div hinzufügen. Um die Verschachtelung zu reduzieren, können wir natürlich Problemumgehungen verwenden. Wir können dem Hintergrund des Körpers ein sehr großes Bild hinzufügen und die Hintergrundposition verwenden, um das Bild so zu positionieren und zu zentrieren, dass die Bilder auf beiden Seiten des Inhaltsbereichs angezeigt werden.

Bei diesem Blog handelt es sich um einen Sonderfall. Wenn man sich die Bilder auf beiden Seiten dieses Blogs in hoher Auflösung ansieht und dann das Fenster verkleinert, sieht man, dass nur ein kleiner Bereich der Bilder auf beiden Seiten mit 1024* angezeigt wird. 768, während der Haupttext immer in der Mitte angezeigt wird.

Um den Effekt zu demonstrieren, fügen wir einige weitere Farbanpassungen hinzu. Der endgültige Stil sieht wie folgt aus: