Bermula dengan CSS Layout_CSS/HTML

Perbezaan terbesar antara reka letak CSS dan susun atur jadual tradisional ialah kedudukan asal menggunakan jadual, dan mengawal jarak bahagian reka letak teks melalui jarak jadual atau menggunakan imej GIF yang tidak berwarna dan lutsinar tetapi kini lapisan (div) digunakan Untuk meletakkan, mengawal jarak bahagian melalui jidar, padding, sempadan dan atribut lain lapisan.

1. Tentukan DIV
Analisis contoh div definisi biasa:

#sampel{ MARGIN: 10px 10px 10px
PADDING-LEFT: 20px
; ATAS: 20px;
PADDING-KANAN: 10px;
PADDING-BAWAH: 10px; -KIRI: #CCC 2px pepejal;
BORDER-TOP: #CCC 2px pepejal; 🎜>TEXT-ALIGN: tengah;
LINE-HEIGHT: 150%;
pada halaman gaya ini.
MARGIN merujuk kepada ruang kosong yang ditinggalkan di luar sempadan lapisan, yang digunakan untuk jidar halaman atau untuk mencipta jurang dengan lapisan lain. "10px 10px 10px 10px" masing-masing mewakili empat jidar "atas, kanan, bawah dan kiri" (arah jam jika semuanya sama, ia boleh disingkatkan kepada "MARGIN: 10px;". Jika margin adalah sifar, tulis "MARGIN: 0px;". Nota: Apabila nilai adalah sifar, kecuali untuk nilai warna RGB 0% yang mesti diikuti dengan tanda peratus, dalam kes lain unit "px" tidak perlu diikuti. MARGIN ialah elemen lutsinar dan tidak boleh menentukan warna.
PADDING merujuk kepada ruang antara sempadan lapisan dan kandungan lapisan. "PADDING-LEFT" merujuk kepada jarak dari sempadan kiri ke kandungan, dan seterusnya. Jika semuanya sama, ia boleh disingkatkan kepada "PADDING:0px". PADDING ialah elemen lutsinar dan tidak boleh menentukan warna.
BORDER merujuk kepada sempadan lapisan "BORDER-RIGHT: #CCC 2px pepejal;" mentakrifkan warna sempadan kanan lapisan sebagai "#CCC", lebar sebagai "2px", dan gaya sebagai "pepejal. "garis lurus. Jika anda mahukan gaya garisan bertitik, anda boleh menggunakan "bertitik".
LATAR BELAKANG ialah latar belakang yang mentakrifkan lapisan. Ia ditakrifkan dalam dua peringkat. Pertama, tentukan latar belakang imej dan gunakan "url(../images/bg_logo.gif)" untuk menentukan laluan imej latar belakang, kedua, tentukan warna latar belakang "#FEFEFE". "on-repeat" bermaksud imej latar belakang tidak perlu diulang Jika anda perlu mengulanginya secara mendatar, gunakan "repeat-x", untuk mengulanginya secara menegak, gunakan "repeat-y", dan ulanginya untuk menutup. keseluruhan latar belakang, gunakan "ulang". "bawah kanan" berikut bermaksud imej latar belakang bermula dari sudut kanan bawah. Jika tiada imej latar belakang, anda hanya boleh menentukan warna latar belakang LATAR BELAKANG: #FEFEFE
COLOR digunakan untuk menentukan warna fon, yang telah diperkenalkan dalam bahagian sebelumnya.
TEXT-ALIGN digunakan untuk menentukan susunan kandungan dalam lapisan, tengah di tengah, kiri di kiri, dan kanan di kanan.
LINE-HEIGHT mentakrifkan ketinggian garisan 150% bermakna ketinggian adalah 150% daripada ketinggian standard Ia juga boleh ditulis sebagai: LINE-HEIGHT:1.5 atau LINE-HEIGHT:1.5em, yang mempunyai maksud yang sama. .

LEBAR ialah lebar lapisan yang ditentukan, yang boleh menjadi nilai tetap, seperti 500px atau peratusan, seperti "60%" di sini. Perlu diingat bahawa lebar ini hanya merujuk kepada lebar kandungan anda, dan tidak termasuk margin, jidar dan padding. Tetapi ia tidak ditakrifkan dengan cara ini dalam sesetengah penyemak imbas, jadi anda perlu mencuba lebih banyak lagi.
Berikut ialah prestasi sebenar lapisan ini:

Berikut ialah kandungan demo, inilah kandungan demo, inilah kandungan demo, inilah kandungan demo, inilah kandungan demo, inilah kandungan demo, di sini adalah kandungan demo, di sini adalah kandungan demo,

Ini adalah kandungan demo, di sini adalah kandungan demo,

Ini adalah kandungan demo, di sini adalah demo kandungan,

Berikut ialah kandungan demo ..
Kita dapat melihat bahawa sempadan adalah 2px kelabu, imej latar belakang tidak diulang di bahagian bawah sebelah kanan, kandungan adalah 20px dari sempadan kiri, dan kandungannya berpusat Semuanya seperti yang diharapkan. Hoho, walaupun ia tidak kelihatan bagus, ia adalah yang paling asas Jika anda menguasainya, anda akan mempelajari separuh daripada teknologi susun atur CSS. Itu sahaja, ia tidak sukar sama sekali! (Apakah separuh lagi? Separuh lagi adalah kedudukan antara lapisan. Saya akan menerangkannya langkah demi langkah kemudian.)


2. Model kotak CSS2

Sejak CSS1 pada tahun 1996 Sejak dilancarkan, organisasi W3C telah mengesyorkan agar semua objek pada halaman web diletakkan dalam kotak. Pereka bentuk boleh mengawal sifat kotak ini dengan membuat definisi Objek ini termasuk perenggan, senarai, tajuk, gambar dan lapisan 🎜> . Model kotak terutamanya mentakrifkan empat bidang: kandungan, padding, sempadan dan margin. Lapisan sampel yang kita bincangkan di atas adalah kotak biasa. Bagi pemula, mereka sering keliru tentang tahap, hubungan dan pengaruh bersama antara jidar, warna latar belakang, imej latar belakang, padding, kandungan dan jidar. Berikut adalah gambarajah skematik 3D model kotak, saya harap ia akan lebih mudah untuk anda fahami dan ingat.


3. Semua imej tambahan hendaklah menggunakan pemprosesan latar belakang
Gunakan reka letak XHTML+CSS yang anda tidak biasa pada mulanya pemikiran yang berbeza daripada susun atur meja tradisional Iaitu: semua imej tambahan dilaksanakan dengan latar belakang. Sesuatu seperti ini:
LATAR BELAKANG: url(images/bg_poem.jpg) #FEFEFE no-repeat kanan bawah; Walaupun anda boleh menggunakan
untuk dimasukkan terus ke dalam kandungan, ini tidak dibenarkan; ."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. ,