Gabungkan CLASS untuk melengkapkan reka letak halaman web style

Gabungkan CLASS untuk melengkapkan reka letak halaman web style_CSS/HTML

WBOY

Lepaskan： 2016-05-16 12:11:03

asal

1819 orang telah melayarinya

Ini adalah cara saya membuat kod susun atur DIV. Saya tidak tahu sama ada ia jelas atau tidak, mari kita lihat bersama
Idea saya ialah pada masa hadapan: Gunakan bahagian standard untuk memasang reka letak DIV halaman web

Saya bahagikan kelas kepada 2 jenis, kelas susun atur, kelas gaya, kelas susun atur ialah rangka, kelas gaya ialah pakaian
Contohnya:
Contohnya, lajur kiri dalam susun atur
Pertama sekali, atributnya ialah: lajur kiri, lebar, Warna latar belakang, warna fon, dsb.

1. Pertama, kelas akan ditakrifkan, seperti: .layout, yang digunakan terutamanya untuk mengawal keseluruhan saiz halaman
.layout{width:98%;margin:0 auto;text-align:left;}

2. Kemudian 3 reka letak asas Kelas(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
Saya meletakkan The 2- susun atur lajur juga diklasifikasikan sebagai susun atur 3 lajur, kerana dalam susun atur 3 lajur, apabila lebar lajur kiri dan kanan masing-masing ialah 0, 3 lajur menjadi 2 lajur.
Apabila kita menulis kod susun atur asas, adalah lebih baik untuk menulisnya dalam format 3 lajur.

３． Sepadan dengan Kelas reka letak, tentukan Kelas gaya yang diperlukan, seperti lebar, tinggi, warna latar belakang, dll. Ini semua elemen gaya
.class_l{background:#ff0;margin-right: -150px;width:150px; }
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}

Ada hanyalah satu set kelas reka letak , banyak kelas gaya boleh ditakrifkan.
Sebagai contoh, jika anda ingin membuat reka letak dua lajur kecil di lajur tengah
, anda boleh menentukan kelas gaya lain
. mid_l{background:#ff0;margin-right: - 100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4 dan kelas gaya, dan rujuknya dalam kod seperti ini

Petikan kedua-dua kelas dan pisahkan mereka dengan ruang , bahagian hadapan ialah kelas reka letak, bahagian belakang ialah kelas gaya, dan anda boleh terus menggunakan petikan ruang di bahagian belakang jika anda perlu menentukannya secara khusus berikan div ini id untuk ditakrifkan. > dan kemudian dipetik dengan class="xxx hide" apabila diperlukan, yang sangat mudah.