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

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

PHP中文网

Lepaskan： 2016-05-16 12:07:20

asal

1853 orang telah melayarinya

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;  
}

Salin selepas log masuk

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

Salin selepas log masuk

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)!