In dieser Lektion vertiefen wir uns in CSS-Techniken, die es uns ermöglichen, komplexe und ansprechende Webseiten zu erstellen. Wir werden uns mit Flexbox und Grid Layouts auseinandersetzen, die uns helfen, Inhalte flexibel und effizient anordnen zu können. Im Folgenden schauen wir uns ein einfaches Beispiel an, wie wir Flexbox nutzen können, um ein Menü-Layout zu erstellen.
<!-- HTML-Code für das Menü-Layout -->
<html>
<head>
<title>Flexbox-Menü</title>
<style>
.menu {
display: flex;
justify-content: space-around;
background-color: #333;
padding: 10px;
}
.menu-item {
color: white;
text-align: center;
flex: 1;
margin: 5px;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">Über uns</div>
<div class="menu-item">Produkte</div>
<div class="menu-item">Kontakt</div>
</div>
</body>
</html>