Susun atur CSS memerlukan bahawa anda memikirkan susun atur laman web anda secara keseluruhan, dan kemudian mengambil kepingan dan meletakkannya bersama-sama. Ketahui cara membina susun atur 3-lajur mudah dengan CSS.
01 dari 09Lukiskan Layout Anda
Anda boleh menarik susun atur anda di atas kertas atau dalam program grafik. Jika anda sudah mempunyai rangka dawai atau reka bentuk yang lebih luas dalam fikiran, memudahkannya ke kotak asas yang membentuk laman web ini. Reka bentuk yang menyertai artikel ini mempunyai tiga lajur di kawasan kandungan utama, serta tajuk dan kaki. Jika anda melihat dengan teliti, anda dapat melihat bahawa tiga lajur tidak sama lebarnya.
Selepas anda membuat susun atur anda, anda boleh mula memikirkan dimensi. Reka contoh contoh ini akan mempunyai dimensi asas berikut:
- Tidak melebihi 900 piksel
- 20 px longkang di sebelah kiri
- 10 px antara tiang dan baris
- Lajur yang 250px, 300px, dan 300px lebar
- Baris teratas adalah 150px tinggi
- Barisan bawah adalah 100px tinggi
Tulis Asas HTML / CSS Asas dan Buat Elemen Kontena
Oleh kerana halaman ini akan menjadi dokumen HTML yang sah, Mula dengan bekas HTML kosong
Tambahkan dalam gaya CSS asas untuk menjauhkan margin halaman, sempadan, dan paddings. Walaupun terdapat gaya CSS standard lain untuk dokumen baru, gaya ini adalah minimum yang anda perlukan untuk mendapatkan susun atur yang bersih. Tambahnya ke kepala dokumen anda:
Untuk mula membina susun atur, masukkan ke dalam elemen kontena. Kadang-kadang berlaku bahawa anda boleh menyingkirkan bekas kemudian, tetapi untuk kebanyakan susun atur tetap, mempunyai unsur kontainer memudahkan untuk mengurus pelayar web yang berbeza. Oleh itu, dalam tubuh, letakkan ini: Dan dalam helaian gaya CSS, letakkan: Kontena mendefinisikan sejauh mana kandungan laman web, serta apa-apa margin sekitar luar dan padding di bahagian dalam. Untuk dokumen ini, bekas itu adalah 870px lebar dengan lubang 20 piksel di sebelah kiri. Tangki ini didirikan dengan gaya margin, tetapi padding di dalam bekas dilepaskan untuk mengelakkan unsur-unsur dari selebar kontainer. #container { lebar: 870px; margin: 0 0 0 20px; / * bahagian atas kanan kiri = padding: 0; } Jika anda menyimpan dokumen anda sekarang, sukar untuk melihat bekas itu kerana ia tidak mempunyai apa-apa di dalamnya. Jika anda menambah teks pemegang tempat, anda akan dapat melihat elemen bekas dengan lebih jelas. Bagaimana anda membuat keputusan untuk gaya barisan tajuk bergantung banyak pada apa yang ada di dalamnya. Sekiranya barisan tajuk hanya akan mempunyai grafik grafik dan tajuk, kemudian gunakan tag tajuk ( HTML untuk baris pengepala akan berada di bahagian atas bekas dan kelihatan seperti ini: Kemudian, untuk menetapkan gaya di atasnya, sempadan merah ditambah di bahagian bawah supaya anda dapat melihat di mana ia berakhir, margin dan padding telah dilepaskan, lebar ditetapkan kepada 100% dan ketinggian hingga 150px: #container h1 { margin: 0; padding: 0; lebar: 100%; ketinggian: 150px; terapung: kiri; sempadan bawah: # c00 pepejal 3px; } Jangan lupa untuk mengapungkan elemen ini dengan float: kiri; harta. Kunci untuk menulis susun atur CSS adalah untuk melayang segalanya - bahkan perkara yang sama lebarnya sebagai bekas. Dengan cara itu, anda sentiasa tahu di mana unsur-unsur akan terletak pada halaman. Pemilih keturunan CSS menggunakan gaya hanya untuk elemen H1 yang berada di dalam elemen #container. Apabila anda membina susun atur tiga lajur dengan CSS, anda perlu membahagikan susun atur anda ke dalam kumpulan dua. Jadi untuk susun atur tiga lajur ini, lajur tengah dan kanan dan dikelompokkan dan diletakkan di sebelah lajur kiri dalam susun atur dua lajur di mana lajur kiri adalah 250px lebar, dan lajur kanannya adalah 610px lebar (300 setiap dua lajur , ditambah 10px untuk saluran di antara mereka). HTML kelihatan seperti ini: Ut aliquip ex ea komodo consequat. Anda akan mendapat lebih banyak wang untuk mendapatkannya, tetapi jika anda mahu. Dalam reprehenderit dalam latihan yang tidak dapat dilakukan, anda perlu mengatasi masalah ini. Anda akan mendapat sokongan daripada kakitangan anda untuk mendapatkan komitmen yang lebih baik daripada anda. Ini adalah cara yang paling mudah untuk digunakan, tetapi juga untuk masa yang lama. Ut labore et dolore magna aliqua. Anda akan mendapat lebih banyak wang daripada anda. Teks pemampan di lajur menjadikannya lebih kelihatan semasa ujian. CSS kelihatan seperti ini: #container # col1 { lebar: 250px; terapung: kiri; } #container # col2outer { lebar: 610px; terapung: betul; margin: 0; padding: 0; } Lajur di sebelah kiri terapung ke kiri, manakala yang lain diapungkan ke kanan. Oleh kerana lebar lebar kedua-dua lajur adalah 860px, terdapat 10 lajur di antara mereka. Untuk membuat tiga lajur, tambahkan dua div di dalam lajur kedua yang lebih luas, sama seperti anda menambah 2 div di dalam lajur kontena dalam langkah terakhir. HTML kelihatan seperti ini: Ini adalah cara yang paling mudah untuk digunakan, tetapi juga untuk masa yang lama. Ut labore et dolore magna aliqua. Anda akan mendapat lebih banyak wang daripada anda. Pada masa yang lalu, anda boleh melihat mana-mana tempat yang sesuai untuk anda.Ullam corporis suscipit laboriosam, memainkan peranan penting. Itaque earum rerum ini mempunyai ciri-ciri yang sangat baik, tetapi ia juga tidak akan memakan masa yang lama di dalamnya. Dan CSS kelihatan seperti ini: # col2outer # col2mid { lebar: 300px; terapung: kiri; } # col2outer # col2side { lebar: 300px; terapung: betul; } Memandangkan kedua-dua kotak lebar 300px itu berada di dalam kotak lebar 610px, akan ada lagi saluran 10px di antara mereka. Sekarang bahawa seluruh halaman ditata, anda boleh menambah di footer. Gunakan div terakhir dengan id "footer", dan tambahkan kandungan supaya anda dapat melihatnya. Anda juga boleh menambah sempadan di bahagian atas, jadi anda akan tahu di mana ia bermula. HTML: CSS: #container #footer {
terapung: kiri;
lebar: 870px;
border-top: # c00 solid 3px;
} 08 dari 09 Sekarang bahawa anda mempunyai susun atur selesai, anda boleh mula menambah gaya dan kandungan peribadi anda sendiri. Ingat bahawa sempadan di tajuk dan footer ditambah untuk menunjukkan bahagian susun atur, tidak khusus untuk reka bentuk. Inilah keseluruhan dokumen, HTML, dan CSS: Gaya Container
Gunakan Headline Tag untuk Header
) lebih masuk akal daripada menggunakan a
Row Header saya
Untuk Dapatkan Tiga Lajur, Mulakan dengan Membangun Dua Lajur
Tambah Dua Lajur Di dalam Lebar Kedua Lebar
Tambah di Footer
Tambah dalam Gaya dan Kandungan Peribadi Anda
HTML / CSS Akhir
