CSS Grundanleitung

CSS-Boxmodell

CSS3Grund教程

CSS Referenzhandbuch

CSS @Regel (RULES)

CSS Beispiele in der大全 CSS Zähler (Zähler)

CSS Layout (Webgestaltung)

CSS-Layout易于设计。我们可以使用CSS布局来设计我们的网页，例如主页，与我们联系，关于我们等。

有三种设计网页布局的方法：

HTML Div+CSS-Layout：现在已广泛使用。
HTML-Tabelle：Langsam, weniger beliebt.
HTML-Rahmen：Veraltet.

CSS-Layout kann Kopfzeile, Fußzeile, linke Spalte, rechte Spalte und Textkörper enthalten. Lassen Sie uns ein einfaches CSS-Layout-Beispiel betrachten.

CSS-Layout-Beispiel

Beispiel

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
.header{margen:-8px　-8px 0px;background-image:linear-gradient(145grad,#7379ff,#b524ef);farbe:weiß;text-ausrichten:center;padding:10px;}　　
.container{breite:100%}　　
.left{breite:15%;float:left;}　　
.body{breite:65%;float:left;background-farbe:pink;padding:5px;}　　
.right{breite:15%;float:left;}　　
.footer{margen:-8px;klar:both;background-image:linear-gradient(145grad,#7379ff,#b524ef);farbe:weiß;text-ausrichten:center;padding:10px;}　　
</style>　　
</head>　　
<body>　　
<div class="header"><h2>Basisanleitung oldtoolbag.com</h2></div>　　
　　
<div class="container">　　
<div class="left">　　
<p>Linker Seitenleiste</p>　　
</div>　　
<div class="body">　　
<h1>Textkörper</h1>　　
<p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p>　　
<p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p>　　
<p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p>　　
<p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p><p>Inhalt der Seite hier</p>　　
<p>Inhalt der Seite hier</p>　　
</div>　　
<div class="right">　　
<p>Rechter Seitenleiste</p>　　
</div>　　
</div>　　
　　
<div class="footer">　　
<p>Footer</p>　　
</div>　
</body>　　
</html>

Testen Sie heraus‹/›

Ausgabeffekt:

Basisanleitung oldtoolbag.com

Linker Seitenleiste

Textkörper

Inhalt der Seite hier

Rechter Seitenleiste

Unten

CSS Beispiele in der大全 CSS Zähler (Zähler)