Struktur DIV css
Adakah anda mempelajari reka letak 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.
Satu lagi sebab ialah anda rugi untuk sifat lapisan pembentangan yang sangat biasa itu (seperti cellpadding, hspace, align="left", dll.) dan tidak tahu penyataan CSS untuk menukarnya. 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 fikirkan tentang "penampilan" dahulu, tetapi fikirkan dahulu tentang 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 ialah contoh klasik. 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" Sesetengah penulis juga memanggilnya "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
Navigasi tapak (menu utama)
Submenu
Kotak carian
Kawasan berfungsi (seperti troli beli-belah, daftar keluar)
Pengaki (hak cipta dan notis undang-undang yang berkaitan)
Kami biasanya menggunakan elemen DIV untuk mentakrifkan struktur ini, serupa dengan ini:
＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＞/📱i ="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＞div id="foot ＜/div＞
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.
Berdasarkan 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 adalah perkara yang menarik
Nama id ialah cara mengawal blok kandungan tertentu Dengan mengelilingi blok kandungan ini dengan DIV dan menambah id unik, anda boleh menggunakan pemilih CSS untuk Menentukan dengan tepat. penampilan 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 #subnava: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 melalui #content p dan #footerp masing-masing. 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 mengesot 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 terakhir adalah milik CSS. (Ini ialah pemisahan struktur dan ekspresi.)
Hampir tiada teg yang menyatakan atribut dalam halaman HTML yang tersusun dengan baik. Kod ini sangat bersih dan ringkas. Contohnya, kod asal dalam HTML dan semua perkara yang mengawal prestasi ditulis dalam CSS . Go, dalam HTML berstruktur, jadual ialah jadual, bukan perkara lain (seperti digunakan untuk reka letak dan kedudukan).
Berlatih menstruktur diri anda
Apa yang dinyatakan di atas hanyalah struktur paling asas Dalam aplikasi sebenar, anda boleh melaraskan blok kandungan seperti yang diperlukan. DIV selalunya bersarang dan anda akan melihat bahawa terdapat lapisan lain dalam lapisan "bekas", dengan struktur yang serupa dengan ini:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
