Einführungs-Tutorial 2 zum CSS-Webseitenlayout: Einspaltige adaptive Breite_Grundlegendes Tutorial

Adaptives Layout ist eine gängige Layoutform im Webdesign. Adaptives Layout kann seine Breiten- und Höhenwerte automatisch entsprechend der Größe des Browserfensters ändern. Es ist eine sehr flexible Layoutform, die auf unterschiedliche Auflösungen reagieren kann . Hocheffiziente Monitore können die besten Anzeigeeffekte liefern. Tatsächlich nimmt der Standardzustand von div die gesamte Zeile ein, was den Ausdruck eines adaptiven Layouts mit einer Breite von 100 % darstellt. Die Arbeit, die wir für eine Spalte mit adaptivem Layout leisten müssen, ist ebenfalls sehr einfach um die Breite im Formular von einem festen Wert in einen Prozentwert zu ändern.

Code kopieren Der Code lautet wie folgt:

#layout {
border: 2px solid #A9C9E2 ;
Hintergrundfarbe: #E8F5FE;
Breite: 80%;


CSS verwendet numerische Werte als Parameter Für die meisten Stileigenschaften stellen alle Prozentsätze bereit, und das Breitenattribut ist keine Ausnahme. Hier ändern wir die Breite von einer Spalte mit fester Breite von 300 Pixel auf 80 %. Wie Sie in der Vorschau unten sehen können, hat sich die Breite des Div auf 80 geändert % der Browserbreite %-Wert. Der Vorteil von Adaptive besteht darin, dass beim Erweitern oder Verkleinern des Browserfensters seine Breite proportional zur aktuellen Breite des Browsers bleibt.

AA25.CN_Adaptive Breite einer Spalte<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <style type="text/css"> <!-- #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 80%; } --> </style> Eine Spalte mit adaptiver Breite (AA25.CN) <div id="layout"> </div>