La disposition du fluide élastique CSS rencontre un affichage de contenu différent

Aujourd'hui, lorsque les moniteurs des utilisateurs deviennent de plus en plus grands, la disposition de largeur solide 1024 * 768 précédente devient de plus en plus déplacée. .

Bien sûr, afin de réduire le gaspillage de ce type d'écran, l'adoption de la disposition du fluide élastique est la meilleure solution. Cependant, en raison de diverses restrictions, les pages Web actuelles ne sont pas entièrement équipées des conditions pour adopter pleinement la disposition élastique fluide (en particulier la destruction sans scrupules des normes par les fabricants de navigateurs et le soutien incomplet des normes CSS, etc.). En tant qu'intermédiaire entre les utilisateurs et les fabricants, nous ne pouvons nous adapter qu'à l'écart entre les deux avec une attitude compatible. Ainsi, en tant que solution de transition, il existe une telle disposition: disposition élastique + largeur solide.

L'élasticité mentionnée ici fait référence à l'arrière-plan de l'adaptation à la largeur de l'écran, tandis que la largeur solide signifie que le contenu principal peut être automatiquement centré sur l'écran large et à écran étroit. Survivre dans l'écart pour répondre aux besoins des utilisateurs avec différentes tailles et résolutions. La conception illustrée dans la figure ci-dessous est un exemple typique.

Parlons moins de bêtises et revenons au point, créons une telle structure de mise en page.

Construisez d'abord la couche structurelle:

Analyserons la couche de structure. Pour concevoir de cette façon?

Nous définissons l'emballage et les conteneurs de pied de page sur 100% de largeur pour s'adapter automatiquement à la largeur de l'écran. Et a également réglé la zone d'en-tête de l'en-tête à 100% de largeur. De cette façon, nous pouvons insérer une image carrelée horizontalement dans l'en-tête et le pied de page, afin que l'arrière-plan de l'en-tête et du pied de page puisse remplir horizontalement l'espace d'écran sous le grand écran.

En tant que contenu principal, notre approche générale est de le laisser centrer et de laisser des blancs des deux côtés lorsque la résolution devient plus grande. Étant donné que la zone d'en-tête a été définie sur 100% de largeur, nous ajoutons un en-tête de la couche de conteneur à l'en-tête, qui sert de porte-bébé du contenu de texte en en-tête réel. Laissez-le centrer automatiquement.

De cette façon, le texte de l'en-tête flotte la couche supérieure du Haeader.

De même, le pied de page peut également être mis en œuvre de cette manière.

Dans la couche de structure ci-dessus, je n'ai pas utilisé cette méthode dans la zone de contenu moyen, mais j'ai fait un peu de solution de contournement. Que devons-nous faire si nous ne semblons pas trop creux des deux côtés du texte sous grande résolution? Bien sûr, afin de réduire la nidification, nous pouvons adopter des solutions de contournement. Nous pouvons ajouter une image surdimensionnée à l'arrière-plan du corps et utiliser la position d'arrière-plan pour positionner l'image au centre, afin que les images des deux côtés de la zone de contenu soient affichées.

Ce blog est un cas spécifique. et le contenu du texte est toujours affiché au centre.

Pour démontrer l'effet, nous ajoutons d'autres ajustements de couleurs et le style final est le suivant: