Peraturan untuk membina rangka kerja CSS untuk laman web portal_Pertukaran pengalaman

Bahagian 1: Perkara yang ingin kami capai apabila membina rangka kerja CSS:

1. Melaksanakan standardisasi dan pelaksanaan bahagian hadapan dengan kebolehsuaian kepada platform arus perdana; 3. Keperluan pemfaktoran semula, Jadikan kelas dan gaya blok boleh digunakan semula sebanyak mungkin
4. Asingkan struktur dan keperluan prestasi, mematuhi konvensyen struktur semantik 5 daripada rangkaian kewangan.
6. Lakukan pengoptimuman enjin carian yang diperlukan pada kod.


Bahagian 2: Beberapa konvensyen tentang penamaan CSS:

1. Jangan gunakan nama kelas huruf besar dan nama id; Gunakan tanda sempang "_" untuk memisahkan perkataan; 4. Huraikan mengikut kawasan contoh: main01_div01_ul01 (boleh difahami sebagai UL pertama di bawah DIV pertama bahagian badan)

Seterusnya kita perlu menganalisis keseluruhan tapak web dan draf reka bentuk untuk mencipta rangka kerja CSS yang sesuai dengan ciri struktur portal kita sendiri

Kami telah mengambil Sina.com sebagai contoh:

Lakukan analisis struktur tapak:

Seluruh halaman dibahagikan kepada: halaman utama, lebih banyak halaman, halaman kandungan, halaman topik, pusat data, pusat berita, halaman saluran, iklan...

Kami menyusun halaman ini untuk mencari bahagian yang sama. Ini terdapat dalam: gaya CSS, kawasan dan serpihan modul.

Selepas pemerhatian, kita boleh membahagikan CSS kepada kategori berikut:

Helaian gaya utama: sjweb.css

fon (koleksi gaya fon, saiz fon dan warna)

reka letak (kumpulan struktur bingkai)

global (koleksi gaya lalai global)

komponen (halaman komponen Helaian gaya separa, koleksi serpihan modul)

Ini semua diimport ke dalam helaian gaya utama sjweb.css Helaian gaya utama berfungsi sebagai pemuat untuk memuatkan gaya luaran baharu,
seperti helaian gaya pengiklanan.
Dengan cara ini, halaman ini hanya perlu menulis sedikit kod gaya CSS yang memenuhi keperluan khas mereka sendiri.

Apabila membina rangka kerja CSS ini, terdapat banyak butiran yang harus disatukan, seperti jarak baris, jarak antara modul, dll.

Berikut ialah rajah struktur halaman utama portal:

Peraturan: 1 Jarak antara semua kawasan, modul, atas, bawah, kiri dan kanan ialah: 8 piksel Warna senarai berita #333; 20 piksel; …Tunggu

Laraskan persekitaran: IE7, ff, IE6, IE5.x, Opera.

PS: Sebenarnya, ini lebih kepada butiran apabila anda membinanya, jadi saya tidak akan menerangkan secara terperinci. Haha