Einführungs-Tutorial 5 zum CSS-Webseitenlayout: Adaptiv mit zwei Spaltenbreiten_Grundlegendes Tutorial

Ausgehend von der zweispaltigen festen Breite können Sie beim Ausprobieren des zweispaltigen Layouts die Breite der linken und rechten Spalte anpassen. Aus dem einspaltigen adaptiven Layout wissen wir, dass die adaptive Einstellung hauptsächlich durch festgelegt wird Der prozentuale Wert der Breite, sodass im zweispaltigen Layout auch prozentuale Breitenwerte verwendet werden. Um mit dem obigen CSS-Code fortzufahren, müssen wir den Breitenwert der zweiten Spalte neu definieren:

Kopieren Sie den Code Der Code lautet wie folgt:

#left {
Hintergrundfarbe: # E8F5FE;
Rahmen: 1px fest #A9C9E2;
Höhe: 300px;
#rechts {
Hintergrundfarbe : #F2FDDB;
border: 1px solid #A5CF3D;
height: 300px
}


Die Breite der linken Spalte ist auf 20 % der Breite eingestellt, und die Breite der rechten Spalte ist auf 70 % der Breite eingestellt. % sieht aus wie eine gewöhnliche Webseite mit Navigation auf der linken Seite und Inhalt auf der rechten Seite.

Anpassung der Breite zweier Spalten – AA25.CN <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Linke Spalte </title>