Div
Mit Div Elementen, ist es möglich die Website viel besser aussehen zu lassen. Dazu erstellt man mit Div Kästen die man auf der Homepage platzieren kann, wie es einem gefällt.
Beispiel zu Div in CSS
<!doctype html>
<html>
<head>
<title>
Erste Seite
</title>
<style type="text/css">
div{border: 2px solid blue;
position:absolute;
width: 150px;
height: 30px;
top:50px;
left:20px;
}
</style>
</head>
<body>
<div>Das ist ein Kasten</div>
</table>
</body>
</html>
Auf diese Weise erstellen wir einen blauen Kasten der absolut positioniert ist(was das bedeutet erkläre ich in einem der folgenden Tutorials) der 150Pixel breit 30 Pixel Hoch ist und die linke obere Ecke des Kastens 50px nach unten und 20 Pixel nach rechts verschoben ist, also 20 Pixel vom linken Rand des Browsers entfernt ist.
In den nächsten Tutorials zeige ich euch noch wie man diese Kästen so positioniert, dass die Homepage wesentlich besser aussieht.
Vorherig
Stylen mit Klassen
Nächste
Absolute Positionierung
Kostenlos
HTML & CSS Tutorial für Anfänger
-
Einführung in HTML
-
Lektion1.1
-
Lektion1.2
-
Lektion1.3
-
-
Verschiedene Tags
-
Lektion2.1
-
Lektion2.2
-
Lektion2.3
-
Lektion2.4
-
Lektion2.5
-
Lektion2.6
-
-
Einführung in CSS
-
Lektion3.1
-
Lektion3.2
-
Lektion3.3
-
Lektion3.4
-
Lektion3.5
-
Lektion3.6
-
-
Tags mit CSS stylen
-
Lektion4.1
-
Lektion4.2
-
Lektion4.3
-
Lektion4.4
-
Lektion4.5
-
-
Wichtige Einsteigertricks
-
Lektion5.1
-
Lektion5.2
-
Lektion5.3
-
Lektion5.4
-
Lektion5.5
-
Lektion5.6
-
Lektion5.7
-
-
CSS in der Praxis
-
Lektion6.1
-
Lektion6.2
-
Lektion6.3
-
Lektion6.4
-
Lektion6.5
-
-
Formulare und Dropdown-Listen
-
Lektion7.1
-
Lektion7.2
-
Lektion7.3
-
Lektion7.4
-
Lektion7.5
-
Beliebte Kurse
Spring Boot Webentwicklung - RESTful APIs entwickeln!
Lerne Spring Boot und erstelle RESTful APIs Das beliebteste Java...
29,99€
Die Java 11 Masterclass - Werde zum Profi-Entwickler!
Werde zum Entwickler mit der Java 11 Masterclass! Starte in...
29,99€
Spiele entwickeln mit Unity 3D – Erstelle eigene Games in C# - Starter
Willkommen zum kostenlosen Teil des Kurses: "Spiele entwickeln mit Unity...
Kostenlos