Erste Schritte mit CSS Layout_CSS/HTML

Der größte Unterschied zwischen dem CSS-Layout und dem herkömmlichen Tabellenlayout besteht darin, dass bei der ursprünglichen Positionierung Tabellen verwendet werden und der Abstand der Textlayoutabschnitte durch den Abstand der Tabellen oder die Verwendung farbloser und transparenter GIF-Bilder gesteuert wird. Jetzt werden jedoch Ebenen (Divs) zum Positionieren verwendet. Steuern Sie den Abstand der Abschnitte durch den Rand, den Abstand, den Rahmen und andere Attribute der Ebene.

1. Definieren Sie DIV
Analysieren Sie ein typisches Definitions-Div-Beispiel:

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING-LEFT: 20px; TOP: 20px;
PADDING-RIGHT: 10px;
BORDER-RIGHT: #CCC 2px solid;
BORDER -LEFT: #CCC 2px solid; RAND-TOP: #CCC 2px solid; 🎜>TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60% } Die Beschreibung lautet wie folgt:

Der Name der Ebene ist ein Beispiel, das mit aufgerufen werden kann
auf der Seite dieses Stils.
RAND bezieht sich auf den Leerraum, der außerhalb des Ebenenrandes verbleibt und für Seitenränder oder zum Erstellen einer Lücke zu anderen Ebenen verwendet wird. „10px 10px 10px 10px“ stellen jeweils die vier Ränder „oben, rechts, unten und links“ dar (im Uhrzeigersinn). Wenn sie alle gleich sind, können sie als „MARGIN: 10px;“ abgekürzt werden. Wenn der Rand Null ist, schreiben Sie „MARGIN: 0px;“. Hinweis: Wenn der Wert Null ist, muss mit Ausnahme des RGB-Farbwerts 0 %, dem ein Prozentzeichen folgen muss, in anderen Fällen die Einheit „px“ nicht gefolgt werden. MARGIN ist ein transparentes Element und kann keine Farbe definieren.
PADDING bezieht sich auf den Abstand zwischen dem Rand der Ebene und dem Inhalt der Ebene. „PADDING-LEFT“ bezieht sich auf den Abstand vom linken Rand zum Inhalt usw. Wenn sie alle gleich sind, können sie auf „PADDING:0px“ abgekürzt werden. PADDING ist ein transparentes Element und kann keine Farbe definieren.
BORDER bezieht sich auf den Rand der Ebene: „BORDER-RIGHT: #CCC 2px solid;“ definiert die rechte Randfarbe der Ebene als „#CCC“, die Breite als „2px“ und den Stil als „solid“. „Gerade Linie. Wenn Sie einen gepunkteten Linienstil wünschen, können Sie „gepunktet“ verwenden.
HINTERGRUND ist der Hintergrund, der die Ebene definiert. Es ist in zwei Ebenen definiert. Definieren Sie zunächst den Bildhintergrund und definieren Sie mit „url(../images/bg_logo.gif)“ den Hintergrundbildpfad. „on-repeat“ bedeutet, dass das Hintergrundbild nicht wiederholt werden muss, wenn Sie es horizontal wiederholen müssen, verwenden Sie „repeat-x“, um es vertikal zu wiederholen, verwenden Sie „repeat-y“ und um es abzudecken Um den gesamten Hintergrund anzuzeigen, verwenden Sie „Wiederholen“. Das folgende „rechts unten;“ bedeutet, dass das Hintergrundbild in der unteren rechten Ecke beginnt. Wenn kein Hintergrundbild vorhanden ist, können Sie nur die Hintergrundfarbe HINTERGRUND definieren: #FEFEFE
COLOR wird verwendet, um die Schriftfarbe zu definieren, die im vorherigen Abschnitt eingeführt wurde.
TEXT-ALIGN wird verwendet, um die Anordnung des Inhalts in der Ebene zu definieren. Die Mitte befindet sich in der Mitte, die linke Seite befindet sich links und die rechte Seite befindet sich rechts.

LINE-HEIGHT definiert die Zeilenhöhe 150 % der Standardhöhe. Sie kann auch geschrieben werden als: LINE-HEIGHT:1.5 oder LINE-HEIGHT:1.5em, was die gleiche Bedeutung hat .
WIDTH ist die Breite der definierten Ebene. Dies kann ein fester Wert sein, z. B. 500 Pixel, oder ein Prozentsatz, z. B. hier „60 %“. Bitte beachten Sie, dass sich diese Breite nur auf die Breite Ihres Inhalts bezieht und keine Ränder, Ränder und Innenabstände umfasst. In einigen Browsern ist dies jedoch nicht so definiert, sodass Sie mehr ausprobieren müssen.
Das Folgende ist die tatsächliche Leistung dieser Ebene:

Hier ist der Demo-Inhalt, hier ist der Demo-Inhalt, hier ist der Demo-Inhalt, hier ist der Demo-Inhalt, hier ist der Demo-Inhalt, hier ist der Demo-Inhalt, hier ist der Demo-Inhalt, hier ist der Demo-Inhalt,

Hier ist der Demo-Inhalt, hier ist der Demo-Inhalt,

Hier ist der Demo-Inhalt, hier ist der Demo-Inhalt,

Hier ist der Demo-Inhalt ..
Wir können sehen, dass der Rand 2 Pixel grau ist, das Hintergrundbild wird unten rechts nicht wiederholt, der Inhalt ist 20 Pixel vom linken Rand entfernt , und der Inhalt ist zentriert. Alles ist wie erwartet. Hoho, obwohl es nicht gut aussieht, ist es das einfachste. Wenn Sie es beherrschen, haben Sie die Hälfte der CSS-Layout-Technologie gelernt. Das ist alles, es ist überhaupt nicht schwierig! (Was ist die andere Hälfte? Die andere Hälfte ist die Positionierung zwischen den Ebenen. Ich werde es später Schritt für Schritt erklären.)


2. CSS2-Boxmodell

Seit CSS1 im Jahr 1996 Seit seiner Einführung empfiehlt die W3C-Organisation, alle Objekte auf der Webseite in einer Box zu platzieren. Designer können die Eigenschaften dieser Box steuern, indem sie Definitionen erstellen . Das Box-Modell definiert hauptsächlich vier Bereiche: Inhalt, Innenabstand, Rand und Rand. Die Beispielebene, über die wir oben gesprochen haben, ist eine typische Box. Anfänger sind oft verwirrt über die Ebenen, Beziehungen und gegenseitigen Einflüsse zwischen Rand, Hintergrundfarbe, Hintergrundbild, Innenabstand, Inhalt und Rahmen. Hier ist ein schematisches 3D-Diagramm des Boxmodells. Ich hoffe, es ist für Sie leichter zu verstehen und zu merken.


Alle Hilfsbilder sollten eine Hintergrundverarbeitung verwenden.
Es gibt eine Technologie, an die Sie zunächst nicht gewöhnt sind Anders als beim herkömmlichen Tabellenlayout bedeutet dies, dass alle Hilfsbilder mit Hintergründen implementiert sind. Etwas in der Art: HINTERGRUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rechts unten
Obwohl Sie

verwenden können, um es direkt in den Inhalt einzufügen, ist dies nicht zulässig ."Gambar tambahan" di sini merujuk kepada gambar yang bukan sebahagian daripada kandungan yang akan dinyatakan pada halaman, tetapi hanya digunakan untuk hiasan, selang waktu dan peringatan. Contohnya: gambar dalam album foto, gambar dalam berita bergambar, dan gambar model kotak 3D di atas adalah sebahagian daripada kandungan mereka boleh dimasukkan terus ke dalam halaman menggunakan elemen , manakala yang lain serupa dengan logo, tajuk. gambar, dan gambar awalan senarai Semua mesti dipaparkan menggunakan mod latar belakang atau kaedah CSS yang lain.

Terdapat dua sebab untuk ini:

Asingkan prestasi sepenuhnya daripada struktur dan gunakan CSS untuk mengawal semua penampilan dan prestasi untuk memudahkan semakan.
Jadikan halaman lebih boleh digunakan dan mesra. Contohnya, jika orang buta menggunakan pembaca skrin, gambar yang dilaksanakan menggunakan teknologi latar belakang tidak akan dibaca dengan kuat. ,