Appearance
Kapitel 26: Basis-Projekte
🛠️ Lernziel: Wenden Sie das Gelernte in einfachen Praxisprojekten an.
26.1 Persönliche Visitenkarte
💡 Projektziel
Erstellen Sie eine persönliche Visitenkarte mit Bild, Name und Beschreibung.
🎯 Verwendete CSS-Kenntnisse
- Box-Modell
- Rahmen (border)
- Hintergrund (background)
- Textstile
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Persönliche Visitenkarte</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.karte {
width: 300px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 20px;
text-align: center;
}
.profilbild {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
}
.name {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.beschreibung {
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="karte">
<img src="profil.jpg" alt="Profilbild" class="profilbild">
<div class="name">Max Mustermann</div>
<div class="beschreibung">Webentwickler aus Berlin. Spezialisiert auf HTML, CSS und JavaScript.</div>
</div>
</body>
</html>26.2 Einfache Navigationsleiste
💡 Projektziel
Erstellen Sie eine einfache Navigationsleiste mit Links.
🎯 Verwendete CSS-Kenntnisse
- Flexbox-Layout
- Float-Layout
- Pseudoklassen-Selektoren (Pseudoklassen-Selektoren)
- Horizontale Anordnung
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Einfache Navigationsleiste</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background-color: #333;
padding: 10px;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 8px 16px;
display: block;
}
nav ul li a:hover {
background-color: #575757;
border-radius: 4px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Dienstleistungen</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</body>
</html>26.3 Bild-Text-Mischlayout
💡 Projektziel
Erstellen Sie eine Seite, auf der Text und Bilder nebeneinander angeordnet sind.
🎯 Verwendete CSS-Kenntnisse
- Float-Layout
- Box-Modell
- Überlaufbehandlung (Überlaufbehandlung)
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Bild-Text-Mischlayout</title>
<style>
* {
box-sizing: border-box;
}
.container {
width: 800px;
margin: 0 auto;
}
.bild {
float: left;
width: 200px;
height: 150px;
margin-right: 20px;
margin-bottom: 10px;
}
.text {
text-align: justify;
line-height: 1.6;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<img src="bild.jpg" alt="Bild" class="bild">
<div class="text">
<p>Dies ist ein langer Text, der sich um das Bild herum anordnet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
</html>26.4 Button-Sammlung
💡 Projektziel
Erstellen Sie eine Sammlung verschiedener Buttons mit unterschiedlichen Stilen.
🎯 Verwendete CSS-Kenntnisse
- Verläufe (Verläufe)
- Übergänge (Übergänge)
- Schatten (box-shadow)
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Button-Sammlung</title>
<style>
body {
padding: 50px;
}
.button {
padding: 15px 32px;
margin: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.button-grund {
background-color: #4CAF50;
color: white;
}
.button-grund:hover {
background-color: #45a049;
}
.button-verlauf {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.button-verlauf:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.button-schatten {
background-color: #008CBA;
color: white;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.button-schatten:hover {
box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<button class="button button-grund">Grund-Button</button>
<button class="button button-verlauf">Verlaufs-Button</button>
<button class="button button-schatten">Schatten-Button</button>
</body>
</html>26.5 Einfaches Formular
💡 Projektziel
Erstellen Sie ein einfaches Anmeldeformular.
🎯 Verwendete CSS-Kenntnisse
- Formularverschönerung
- Flexbox-Layout
- Zentrierung
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Einfaches Formular</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.form-container {
width: 350px;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.form-container h2 {
text-align: center;
margin-bottom: 30px;
}
.form-input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.form-input:focus {
border-color: #4CAF50;
outline: none;
}
.submit-button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
.submit-button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Anmeldung</h2>
<form>
<input type="text" class="form-input" placeholder="Benutzername" required>
<input type="password" class="form-input" placeholder="Passwort" required>
<button type="submit" class="submit-button">Anmelden</button>
</form>
</div>
</body>
</html>✅ Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Persönliche Visitenkarte - Box-Modell, Rahmen, Hintergrund
- ✅ Einfache Navigationsleiste - Flexbox, Float
- ✅ Bild-Text-Mischlayout - Float, Überlauf
- ✅ Button-Sammlung - Verläufe, Übergänge, Schatten
- ✅ Einfaches Formular - Formularstyling, Flexbox
🎯 Übung
Übung1: Erstellen Sie eine Visitenkarte mit Ihren eigenen Informationen.
Übung2: Erstellen Sie eine Navigationsleiste mit Dropdown-Menü.
Übung3: Erstellen Sie ein Anmeldeformular mit Validierung.
📚 Nächstes Kapitel
Im nächsten Kapitel lernen wir umfassende Projekte (Umfassende Projekte), um komplexere Webseiten zu erstellen.
[Weiter zu Kapitel 27: Umfassende Projekte →]