16 Contoh Reka Letak CSS Asas_Tutorial Asas yang Sangat Baik

Baris tunggal dan lajur tunggal

Baris tunggal dan lajur tunggal 1: Gunakan apungan untuk terapung di sudut kiri atas, lebar tetap.

#content { float: padding: 10px; latar belakang: #FFF padu #666; ""; voice-family:inherit; lebar: 370px }html>body #content { width: 370px;

Baris tunggal dan lajur tunggal 2: Ditetapkan di penjuru kiri sebelah atas, lebar tetap, menggunakan kedudukan mutlak. #content { kedudukan: mutlak; 0px; padding: 20px; -keluarga: "\"}\""; voice-family:inherit;

Baris tunggal dan lajur tunggal 3

: Ditetapkan di penjuru kiri sebelah atas, tiada lebar tetap, gunakan peratusan (%) untuk menentukan lebar untuk menyesuaikan diri dengan halaman.

Baris tunggal dan lajur tunggal 4

(disyorkan): lebar tetap, menggunakan atribut pemusatan (penjajaran teks: tengah;) yang ditakrifkan dalam gaya badan untuk memusatkan halaman secara automatik. Baris tunggal dan dua lajur

Baris tunggal dan dua lajur 1: Kedua-dua lajur mempunyai lebar tetap. Lajur pertama terapung ke sudut kiri atas, dan lajur kedua terapung di sebelah kanan lajur pertama.

Baris tunggal dan dua lajur 2

: Kedua-dua lajur mempunyai lebar peratusan, tetapi tidak sesuai dengan skrin. Lajur pertama ditetapkan pada sudut kiri atas, dan lajur kedua terapung di sebelah kanan lajur pertama.

Baris tunggal dan dua lajur 3

: Kedua-dua lajur mempunyai lebar peratusan dan memenuhi skrin. Kedua-dua lajur diposisikan secara mutlak.

Baris tunggal dan dua lajur 4

: Kedua-dua lajur mempunyai lebar peratusan dan memenuhi skrin. Lajur pertama terapung di sudut kiri atas, dan lajur kedua terapung di sudut kanan atas.

Baris tunggal dan dua lajur 5

: Kedua-dua lajur mempunyai lebar peratusan dan memenuhi skrin. Lajur pertama terapung ke sudut kiri atas, dan lajur kedua terapung di sebelah kanan lajur pertama. Baris tunggal dan tiga lajur

Baris tunggal dan tiga lajur 1: Kedua-dua lajur kiri dan kanan diletakkan secara mutlak (lajur kanan diletakkan di bahagian atas sebelah kanan). Lajur kiri dan kanan mempunyai lebar tetap, dan lajur tengah menyesuaikan diri dengan halaman.

Baris tunggal dan tiga lajur 2

: Lajur kiri diletakkan di sebelah kiri atas, lajur kanan diletakkan di sebelah kanan atas dan lajur tengah terapung di sebelah kanan lajur kiri. Lajur kiri dan kanan mempunyai lebar tetap, dan lajur tengah menyesuaikan diri dengan halaman.

Baris tunggal dan tiga lajur 3

: Ketiga-tiga lajur diposisikan secara mutlak. Lajur kiri dan kanan mempunyai lebar tetap, dan lajur tengah menyesuaikan diri mengikut kandungan.

Baris tunggal dan tiga lajur 4

(disyorkan): Serupa dengan gaya 2, kecuali margin: atribut 20px ditambahkan pada gaya badan, yang menyelesaikan masalah lajur tengah berada di atas dalam Netscape 6.0.

Une seule ligne et trois colonnes 5

 : Les colonnes de gauche et de droite sont positionnées de manière absolue et la colonne du milieu est adaptative. Largeur plein écran.

Trois colonnes dans la rangée du haut

Trois colonnes dans la rangée supérieure 1(recommandé) : La rangée supérieure s'adapte à la largeur de la page. Les colonnes de gauche et de droite sont positionnées de manière absolue et la colonne du milieu s'adapte à la page.

• Rangée supérieure trois colonnes 2

 : largeur plein écran