Heim > Artikel > Backend-Entwicklung > Schritt-für-Schritt-Anleitung zum klassischen dreispaltigen Layout des Heiligen Grals
Schritt-für-Schritt-Anleitung zum klassischen dreispaltigen Layout des Heiligen Grals
- 天蓬老师Original
- 2018-08-18 13:55:152183Durchsuche
Im Vergleich zum „Shuangfeiji-Layout“ ist die DOM-Struktur des Holy Grail-Layouts einfacher und eleganter. Die endgültige Darstellung: 
Das Folgende ist der Heilige Gral Der Kerncode des Layouts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style>
.header, .footer {
width: 100%;
height: 60px;
background-color: #aaa;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color: #eee;
}
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
.main {
width: 100%;
min-height: 650px;
background-color: #66CCFF;
float:left;
}
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">header</div>
</div>
<div class="container">
<div class="main">主要内容区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>Im Folgenden erkläre ich Ihnen den Inhalt des Codes nacheinander:
Der erste Schritt: Erstellen Sie die DOM-Struktur :
Das Grundprinzip ist:
Der mittlere Bereich ist der Hauptteil der Seite, der mit einem dreispaltigen Layout vervollständigt wird Die drei mittleren Spalten, die Mitte ist der Hauptteil der Anzeige, der zuerst platziert und gerendert werden muss. Verbessern Sie die Benutzererfahrung.
<!--1.头部:--> <div class="header"> <div class="content">header</div> </div> <!--2.中间主体:--> <div class="container"> <div class="main">主要内容区</div> <div class="left">左边</div> <div class="right">右边</div> </div> <!--3.底部:--> <div class="footer"> <div class="content">footer</div> </div>
Schritt 2: Schreiben Sie die allgemeinen Stile unter Kopf und Ende der Seite [im
Detaillierte Erklärung:
1 Legen Sie zunächst den allgemeinen Stil fest Kopf und Unterseite:
(1) Breite: 100 %; Die Breite entspricht der Seitenbreite: 100 % und wird automatisch erweitert.
(2) Höhe: 60 Pixel; 60 Pixel, Sie können es anpassen, wenn es nicht ausreicht;
(3)Hintergrundfarbe: #aaa; Legen Sie die Hintergrundreferenzfarbe fest, Sie können entscheiden, ob Sie sie entsprechend Ihren Anforderungen beibehalten möchten;
2 der Stil der Kopf- und unteren Inhaltsbereiche:
(1)width:1000px Verkleinern Sie den öffentlichen Inhaltsbereich und stellen Sie ihn auf eine feste Breite ein, um das Ausfüllen des Inhalts zu erleichtern; ; Legen Sie die Mindesthöhe fest, um ein vollständiges Seitenlayout sicherzustellen, und verwenden Sie automatisch die übergeordnete Höhe von 60 Pixel. (3) margin: auto; Der Inhalt des öffentlichen Inhaltsbereichs ist ebenfalls ein Block use margin ;
(4)text-align:center; Interner Text wird horizontal zentriert;
(5)line-height: 60 %; Interner einzeiliger Text wird vertikal zentriert;
(6)background -color:#eee; Legen Sie die Hintergrundreferenzfarbe fest und bestimmen Sie, ob sie je nach Situation beibehalten werden soll.
Schritt 3: Legen Sie den Stil des Zwischenkörpercontainers fest:
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
Detaillierte Erklärung:
Stellen Sie die Gesamtbreite des übergeordneten Containers des dreispaltigen Layouts auf 600px ein. Warum sind es 600 Pixel? Da die Gesamtbreite meiner Seite 1000 Pixel beträgt und die Breite der linken und rechten Seite 200 Pixel beträgt, beträgt der mittlere Teil 600 Pixel. Das Festlegen der Gesamtbreite des Containers auf 600 Pixel hat zwei Funktionen: Erstens wird er verwendet für die Vererbung im mittleren Block, und zweitens kann er durch Auffüllen erweitert werden,
sodass Sie sich keine Sorgen machen müssen, dass 600 Pixel die drei Inhaltsspalten nicht abdecken können ;
2.margin: auto ; Zentrieren Sie den übergeordneten Container im aktuellen Fenster;
3.overflow: versteckt; Da ich Floats für die nächsten drei Inhaltsspalten verwenden muss, damit der übergeordnete Container den untergeordneten Block umschließen kann, wird es keine geben Hier müssen die Höhe reduziert und der Überlauf ausgeblendet werden.
4.padding: 0 200px
Diese Anweisung hat zwei Funktionen:
(1) Legen Sie den Innenrandabstand fest, der den aktuellen Container verlassen kann rechts Die Breite jeder Seite wird um 200 Pixel, also 400 Pixel, erweitert. Zu diesem Zeitpunkt beträgt die Gesamtbreite des Containers 1000 Pixel. (2) Der Platz nach der Erweiterung des Containers ist tatsächlich der dafür reservierte Platz linke und rechte Spalte der Seitenleiste, andernfalls die linke und rechte Die zweite Spalte kann nicht angezeigt werden;
5.background-color: yellow; geändert;
Schritt 4: Legen Sie den mittleren Inhaltsbereich in den drei Spalten fest
.main {
width: 100%;
min-height: 650px;
background-color: #6CF;
float:left;
}
Detaillierte Erklärung: 1.Breite: 100 %; Die mittlere Breite beträgt 100 %, was tatsächlich den gesamten Inhaltsbereich des Containers einnimmt (ohne 400 Pixel Polsterung); Ist nicht viel Inhalt vorhanden, kann dennoch eine ausreichende Höhe angezeigt werden, ohne die Gesamtschönheit der Seite und des Nutzererlebnisses zu beeinträchtigen;3.background-color: #6cf; braucht;
4.float: left; Es ist sehr wichtig, den mittleren Block aus dem Dokumentfluss zu schweben und den gesamten Inhaltsbereich zu belegen. Zu diesem Zeitpunkt werden der linke und der rechte Block automatisch ausgefüllt und nach oben verschoben.
Schritt 5: Legen Sie den Anzeigestil der linken Spalte fest
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}Detaillierte Erklärung:
1.width: 200px; Die linke Spalte ist 200 Pixel groß, was der im Container reservierten Füllbreite entspricht 2.min-height: 650px; Die Breite stimmt natürlich mit der mittleren Spalte überein Es kann auch inkonsistent sein;3.background-color: #fd6fcf; Hintergrundreferenzfarbe, entscheiden Sie, ob Sie sie entsprechend der Situation beibehalten möchten;
4.float: left; Sehr wichtig, sie schwebt aus dem Dokumentfluss, da die Breite in der Mitte liegt Block ist 100 %, daher wird er unten gestaucht;5.margin-left: -100 %; Verschieben Sie die linke Spalte in den linken Abstand, der vom übergeordneten Container reserviert ist, indem Sie negative Ränder festlegen;
Hinweis: 100 % , entspricht: -600px, da die aktuelle Breite des übergeordneten Containers 600 beträgt. Wenn Sie einen negativen Wert festlegen, wird das Element in die entgegengesetzte Richtung gezogen
. Zu diesem Zeitpunkt nimmt die linke Spalte jedoch die 200-Pixel-Position ein die linke Seite des mittleren Inhaltsbereichs. ;
6.position: relativ; Stellen Sie die Positionierungsmethode der Elemente in der linken Spalte auf: relative Positionierung, relativ zur ursprünglichen Position, immer noch im Dokumentfluss.
7.left: -200px; Negativer Wert bedeutet, dass die linke Spalte in den linken Bereich des Containers verschoben wird wird die linke Spalte nicht sehen.
Schritt 6: Legen Sie den Anzeigestil der rechten Spalte fest
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
1.right: 200px; 宽度与左列相同,均为200px;
2.min-height: 650px; 最小高度与左列一致;
3.background-color: #fc0107; 设置参考背景色;
4.float: left; 设置左浮动,脱离文档流后,对它重新进行排列;
5.margin-left: -200px; 向反方向上移200px,其实就是与中间列并排显示;
6.position: relative; 设置相对定位
7.right: -200px; 将右列移动到容器的padding-right区域内
到此为止,圣杯布局完成~~
聪明的你,学会了吗?
Das obige ist der detaillierte Inhalt vonSchritt-für-Schritt-Anleitung zum klassischen dreispaltigen Layout des Heiligen Grals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!