Bermula dengan div+css layout_CSS/HTML

Adakah anda sedang belajar susun atur CSS? Adakah anda masih tidak dapat menguasai reka letak CSS tulen sepenuhnya? Biasanya terdapat dua situasi yang menghalang pembelajaran anda:

Kemungkinan pertama ialah anda masih belum memahami prinsip halaman pemprosesan CSS. Sebelum anda mempertimbangkan prestasi keseluruhan halaman anda, anda harus terlebih dahulu mempertimbangkan semantik dan struktur kandungan, dan kemudian menambah CSS untuk semantik dan struktur. Artikel ini akan memberitahu anda cara menstruktur HTML.

Sebab lain ialah anda bingung untuk atribut lapisan pembentangan yang sangat biasa (seperti cellpadding, hspace, align="left", dll.) dan tidak tahu penyataan CSS untuk menukarnya menjadi . Sebaik sahaja anda telah menyelesaikan masalah pertama dan mengetahui cara menstrukturkan HTML anda, saya akan memberikan anda senarai yang memperincikan CSS yang akan digunakan untuk menggantikan atribut persembahan asal.

HTML Berstruktur
Apabila kami mula-mula belajar membuat halaman web, kami sentiasa mempertimbangkan cara mereka bentuknya terlebih dahulu, dengan mengambil kira gambar, fon, warna dan pelan reka letak. Kemudian kami menggunakan Photoshop atau Fireworks untuk melukisnya dan memotongnya menjadi gambar kecil. Akhir sekali, edit HTML untuk memulihkan semua reka bentuk ke halaman.

Jika anda mahu halaman HTML anda disusun dengan CSS (mesra CSS), anda perlu kembali dan mulakan semula Jangan fikir tentang "penampilan" dahulu, tetapi fikirkan dahulu semantik dan struktur kandungan halaman anda.

Penampilan bukanlah perkara yang paling penting. Halaman HTML yang tersusun dengan baik boleh dipersembahkan dalam sebarang penampilan, dan CSS Zen Garden adalah contoh biasa. CSS Zen Garden membantu kami akhirnya menyedari kuasa CSS.

HTML bukan sahaja untuk dibaca pada skrin komputer. Imej anda yang direka dengan teliti dalam Photoshop mungkin tidak dipaparkan pada PDA, telefon mudah alih dan pembaca skrin. Tetapi halaman HTML yang tersusun dengan baik boleh dipaparkan di mana-mana dan pada mana-mana peranti rangkaian melalui definisi CSS yang berbeza.

Mula berfikir
Pertama sekali, anda perlu mempelajari apa itu "struktur", yang sesetengah penulis juga panggil "semantik". Maksud istilah ini ialah anda perlu menganalisis blok kandungan anda dan tujuan setiap kandungan disediakan, dan kemudian membina struktur HTML yang sepadan berdasarkan tujuan kandungan ini.

Jika anda duduk dan menganalisis dengan teliti serta merancang struktur halaman anda, anda mungkin akan mendapat beberapa bahagian seperti ini:

Logo dan nama tapak
Kandungan halaman utama
Tapak navigasi ( Menu utama)
Submenu
Kotak carian
Kawasan ritual (seperti troli beli-belah, daftar keluar)
Footer (hak cipta dan notis undang-undang yang berkaitan)
Kami biasanya menggunakan elemen DIV untuk menggabungkan struktur ini Takrifkannya seperti ini:

Ini bukan reka letak, tetapi struktur. Ini ialah perihalan semantik blok kandungan. Apabila anda memahami struktur anda, anda boleh menambah ID yang sepadan pada DIV. Sebarang blok kandungan boleh terkandung dalam bekas DIV, dan DIV lain boleh bersarang di dalamnya. Blok kandungan boleh mengandungi sebarang elemen HTML---tajuk, perenggan, imej, jadual, senarai, dsb.

Mengikut perkara di atas, anda sudah tahu cara menstruktur HTML, dan kini anda boleh menentukan reka letak dan gaya. Setiap blok kandungan boleh diletakkan di mana-mana pada halaman, dan warna, fon, sempadan, latar belakang, sifat penjajaran, dll. blok boleh ditentukan.

Menggunakan pemilih ialah perkara yang menarik
Nama id ialah cara mengawal blok kandungan tertentu Dengan mengelilingi blok kandungan ini dengan DIV dan menambahkan id unik, anda boleh menggunakan CSS untuk memilih ia penukar untuk mentakrifkan dengan tepat rupa setiap elemen halaman, termasuk tajuk, senarai, gambar, pautan atau perenggan, dsb. Contohnya, jika anda menulis peraturan CSS untuk #header, peraturan itu boleh berbeza sepenuhnya daripada peraturan imej dalam #content.

Contoh lain ialah: anda boleh menentukan gaya pautan dalam blok kandungan yang berbeza melalui peraturan yang berbeza. Sesuatu seperti ini: #globalnav a:link atau #subnav a:link atau #content a:link. Anda juga boleh menentukan gaya yang berbeza untuk elemen yang sama dalam blok kandungan yang berbeza. Contohnya, tentukan gaya p dalam #content dan #footer masing-masing melalui #content p dan #footer p. Dari segi struktur, halaman anda terdiri daripada gambar, pautan, senarai, perenggan, dsb. Elemen ini sendiri tidak menjejaskan peranti rangkaian yang mana ia dipaparkan (PDA, telefon mudah alih atau TV Internet Ia boleh ditakrifkan sebagai Sebarang penampilan prestasi).

Halaman HTML yang disusun dengan teliti adalah sangat mudah dan setiap elemen digunakan untuk tujuan struktur. Apabila anda ingin menginden perenggan, anda tidak perlu menggunakan teg blokquote Hanya gunakan teg p dan tambah peraturan margin CSS pada p untuk mencapai tujuan lekukan. p ialah teg berstruktur dan margin ialah atribut persembahan Yang pertama adalah milik HTML dan yang kedua adalah milik CSS. (Ini ialah pemisahan struktur dan pembentangan.)

Hampir tiada teg atribut pembentangan dalam halaman HTML yang tersusun dengan baik. Kod ini sangat bersih dan ringkas. Contohnya, kod asal kini hanya boleh menulis dalam HTML dan semua perkara yang mengawal prestasi ditulis dalam CSS Dalam HTML berstruktur, jadual ialah jadual, bukan apa-apa lagi (seperti digunakan untuk reka letak dan kedudukan).

Amalkan struktur sendiri
Yang disebutkan di atas hanyalah struktur paling asas Dalam aplikasi sebenar, anda boleh melaraskan blok kandungan mengikut keperluan anda. DIV bersarang sering berlaku, dan anda akan melihat bahawa terdapat lapisan lain dalam lapisan "bekas", dengan struktur yang serupa dengan ini:

senarai

senarai lain

Mit verschachtelten div-Elementen können Sie weitere CSS-Regeln definieren, um die Darstellung zu steuern. Sie können beispielsweise #navcontainer eine Regel geben, um die Liste rechts zu zentrieren, und #globalnav eine Regel geben, um die Liste links zu zentrieren , und geben Sie # Die Subnav-Liste hat eine völlig andere Leistung.

Traditionelle Methoden durch CSS ersetzen
Die folgende Liste hilft Ihnen, traditionelle Methoden durch CSS zu ersetzen:

HTML-Attribute und entsprechende CSS-Methoden
HTML-Attribute CSS-Methoden Beschreibung
align ="left"

align="right" float: left;

float: right; Verwenden Sie CSS, um jedes Element zu schweben: Bilder, Absätze, Divs, Titel, Tabellen, Listen usw. usw.

Wenn Sie das Float-Attribut verwenden, müssen Sie eine Breite für das Floating-Element definieren.

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; Mit CSS kann der Rand für jedes Element festgelegt werden, nicht nur für das Körperelement. Sie können die Randwerte der oberen, rechten, unteren und linken Elemente angeben.

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:visited: #339; :hover: #999;

a:active: #00f;In HTML wird die Farbe des Links als Attributwert des Körpers definiert. Der Linkstil ist auf der gesamten Seite gleich. Mithilfe von CSS-Selektoren können Link-Stile in verschiedenen Teilen der Seite unterschiedlich sein.

bgcolor="#FFFFFF" Hintergrundfarbe: #fff; In CSS kann die Hintergrundfarbe für jedes Element definiert werden, nicht nur für Körper- und Tabellenelemente.

bordercolor="#FFFFFF" border-color: #fff; Jedes Element kann einen Rand (boeder) festlegen, Sie können jeweils oben, rechts, unten und links definieren

border="3 "

cellspacing="3" border-width: 3px; Mit CSS können Sie den Rand der Tabelle als einheitlichen Stil definieren oder Sie können Farbe, Größe und Stil des oberen, rechten und rechten Rands definieren. unteren bzw. linken Rand.

Sie können diese Selektoren „table“, „td“ oder „th“ verwenden







klar: links;

klar: rechts;

klar: beides; > Viele 2- oder 3-Spalten-Layouts verwenden das Float-Attribut zur Positionierung. Wenn Sie eine Hintergrundfarbe oder ein Hintergrundbild in der schwebenden Ebene definieren, können Sie das klare Attribut

cellpadding="3"

vspace="3"

hspace verwenden = „3“ padding: 3px; Mit CSS kann jedes Element das Polsterungsattribut auf „oben“, „rechts“, „unten“ und „links“ festlegen. Polsterung ist transparent.

align="center" text-align: center;

margin-right: auto; margin-left: auto; Text-align gilt nur für Text

Elemente auf Blockebene wie div, p können mit margin-right: auto; und margin-left: auto horizontal zentriert werden


Einige bedauerliche Techniken und Arbeitsbedingungen
Aufgrund der Unvollkommenheit Um CSS durch Browser zu unterstützen, müssen wir manchmal einige Tricks anwenden (Hacks) oder eine Umgebung einrichten (Workarounds), damit CSS den gleichen Effekt wie herkömmliche Methoden erzielen kann. Beispielsweise müssen Elemente auf Blockebene manchmal horizontale Zentrierungstechniken, Box-Model-Bug-Techniken usw. verwenden. Alle diese Techniken werden in Molly Holzschlags Artikel „Integrated Web Design: Strategies for Long-Term CSS Hack Management“ ausführlich beschrieben.

Eine weitere Ressourcenseite für CSS-Tipps ist „Position is Everything“ von Big John und Holly Bergevin.

Floating-Verhalten verstehen
Eric Meyers „Containing Floats“ hilft Ihnen dabei, die Verwendung von Float-Attributen für das Layout zu erlernen. Manchmal müssen Float-Elemente gelöscht werden. Die Lektüre von „So löschen Sie Floats ohne Strukturmarkierung“.

Weitere Hilfe
Die bestehende CSS-Diskussionsliste ist eine gute Ressource, sie sammelt Informationen aus einer WiKiA-Diskussionsgruppe, einschließlich einer Zusammenfassung des CSS-Layouts (css-discuss.incutio.com/?page=CssLayouts) , Zusammenfassung der CSS-Tipps (css-discuss.incutio.com/?page=CssHack) und mehr