footes <\/div>\n<\/body>\n<\/html><\/pre>

Dadurch werden div<\/code> verwendet, um verschiedene Abschnitte darzustellen: Header, Navi, Main (einschlie?lich Seitenleiste und Inhalt) und Fu?zeile. <\/p>

---

2. Style das Layout mit CSS<\/h3>

Erstellen Sie nun eine styles.css<\/code> -Datei, um das Layout visuell strukturiert zu machen.<\/p>

 * {{\n  Rand: 0;\n  Polsterung: 0;\n  Kastengr??en: Border-Box;\n}\n\nK?rper {\n  Schriftfamilie: Arial, Sans-Serif;\n}\n\n.Header {\n  Hintergrundfarbe: #4caf50;\n  Farbe: wei?;\n  Text-Align: Mitte;\n  Polsterung: 20px;\n}\n\n.navbar {\n  Hintergrundfarbe: #333;\n  Farbe: wei?;\n  Polsterung: 10px;\n  Text-Align: Mitte;\n}\n\n.haupts?chlich {\n  Anzeige: Flex;\n  min-hohe: 60VH;\n}\n\n.sidebar {\n  Hintergrundfarbe: #F4F4F4;\n  Breite: 200px;\n  Polsterung: 20px;\n}\n\n.Inhalt {\n  Flex: 1;\n  Polsterung: 20px;\n}\n\n.footer {\n  Hintergrundfarbe: #333;\n  Farbe: wei?;\n  Text-Align: Mitte;\n  Polsterung: 15px;\n}<\/pre>
 Key CSS -Konzepte verwendet:<\/h4>
 display: flex<\/code><\/strong> auf .main<\/code> l?sst die Seitenleiste und den Inhalt nebeneinander sitzen.<\/li>
 flex: 1<\/code><\/strong> auf .content<\/code> l?sst den verbleibenden Platz einnehmen.<\/li>
 box-sizing: border-box<\/code><\/strong> sorgt dafür, dass die Polsterung keine Layoutbreiten durchbricht.<\/li>
 min-height: 60vh<\/code><\/strong> verhindert, dass der Hauptabschnitt zusammenbricht, wenn der Inhalt kurz ist.<\/li><\/ul>
 3. Reaktionsanpassung (optional)<\/h3>
 Machen Sie es mobilfreundlich, indem Sie die Seitenleiste und den Inhalt auf kleineren Bildschirmen stapeln: <\/p>
 @media (max-Width: 768px) {\n  .haupts?chlich {\n    Flex-Richtung: S?ule;\n  }\n  .sidebar {\n    Breite: 100%;\n  }\n}<\/pre>
 Dies ?ndert das Layout auf vertikal, wenn der Bildschirm eng ist.<\/p>\n
\n
 Letzte Notizen<\/h3>\n
\n
 Sie ben?tigen keine komplexen Werkzeuge, um ein sauberes Layout zu erstellen.<\/li>\n
 Verwenden Sie semantische HTML ( 
<\/header><\/code> ,