cari

Rumah  >  Artikel  >  hujung hadapan web  >  Tutorial pengenalan reka letak halaman web CSS 3: Satu lajur dengan lebar tetap berpusat_Tutorial asas

Tutorial pengenalan reka letak halaman web CSS 3: Satu lajur dengan lebar tetap berpusat_Tutorial asas

PHP中文网
PHP中文网asal
2016-05-16 12:07:201827semak imbas

Tutorial pengenalan reka letak halaman web CSS 3: Satu lajur dengan lebar tetap berpusat_Tutorial Asas

Pemusatan keseluruhan halaman adalah bentuk yang paling biasa digunakan dalam reka letak meja tradisional , kita gunakan Untuk mencapai ini, gunakan atribut align="center" pada jadual. p itu sendiri juga menyokong atribut align="center", yang juga boleh menjadikan p kelihatan berpusat Walau bagaimanapun, susun atur CSS adalah untuk mencapai pemisahan prestasi dan kandungan, dan atribut align ialah kod gaya yang ditulis dalam atribut p XHTML. . Ia melanggar prinsip perkongsian (pemisahan boleh menjadikan tapak web anda lebih mudah diurus), jadi kandungan harus dipusatkan menggunakan kaedah CSS Mari kita ambil kod susun atur satu lajur lebar tetap sebagai contoh dan tambahkan gaya CSS berpusat padanya.

Kodnya adalah seperti berikut:

#layout {  
    border: 2px solid #A9C9E2;  
    background-color: #E8F5FE;  
    height: 200px;  
    width: 300px;  
    margin:0px auto;  
}


Atribut margin digunakan untuk mengawal jidar luar di bahagian atas, kanan, bawah dan kiri arah objek. Apabila margin menggunakan dua parameter, Parameter pertama mewakili margin atas dan bawah, dan parameter kedua mewakili margin kiri dan kanan. Selain menggunakan nilai berangka secara langsung, margin tidak menyokong nilai yang dipanggil auto Nilai auto membolehkan penyemak imbas menentukan margin secara automatik Di sini, kami menetapkan margin kiri dan kanan p semasa kepada auto, dan penyemak imbas akan ditetapkan jidar kiri dan kanan p. Jarak ditetapkan untuk sama dan dibentangkan dalam keadaan berpusat, dengan itu mencapai kesan pertengahan permainan.
Nota: Kaedah pemusatan ini tidak disokong oleh pelayar di bawah IE6 Bahagian CSS HACK di bawah akan menerangkan penyelesaian secara terperinci. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML


Langkah operasi adalah sama seperti lajur lebar tetap, kecuali dalam item tetapan sempadan CSS, tetapkan bahagian atas, kanan, bawah dan kiri sempadan kepada 0, auto, 0, auto masing-masing.

Di atas ialah kandungan tutorial pengenalan reka letak halaman web CSS 3: Satu lajur dengan tutorial asas berpusat lebar tetap Untuk kandungan yang lebih berkaitan, sila beri perhatian kepada Laman web PHP Cina (www.php .cn)!


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tutorial Pengenalan Reka Letak Halaman Web CSS 4: Dua Lajur dengan Tutorial Lebar_Basic TetapArtikel seterusnya：Tutorial Pengenalan Reka Letak Halaman Web CSS 4: Dua Lajur dengan Tutorial Lebar_Basic Tetap

Artikel berkaitan

Lihat lagi