Rancangan Laman Web CSS
- 页上一 Kilang CSS
- 页下一 Unit CSS
Tata letak situs web
Situs web biasanya dibagi menjadi kepala halaman, menu, konten, dan kaki halaman:
Ada banyak desain tata letak yang berbeda yang dapat dipilih. Namun, struktur di atas adalah salah satu struktur yang paling sering digunakan, dan kami akan mengkaji dengan rinci di tutorial ini.
Kepala halaman
Kepala halaman (header) biasanya berada di atas situs web (atau di bawah menu navigasi). Ini biasanya mengandung logo atau nama situs:
实例
.header {
background-color: #F1F1F1;
text-align: center;
margin: 20px;
}
结果：
Navigasi
Navigasi termasuk daftar kaitan untuk membantu pengguna menggali situs web anda:
实例
/* wadah navbar */
.topnav {
keluar: tak terbatas;
background-color: #333;
}
/* kaitan Navbar */
.topnav a {
float: left;
display: block;
warna: #f2f2f2;
text-align: center;
margin: 14px 16px;
text-decoration: none;
}
/* warna kaitan - berubah warna saat diarahkan */
.topnav a:hover {
background-color: #ddd;
warna: hitam;
}
结果：
Konten
Pilihan tata letak biasanya tergantung pengguna tujuan anda. Tata letak yang paling umum adalah salah satu dari berikut ini (atau gabungkannya):
- 1-列Layout (biasanya digunakan untuk peramban ponsel)
- 2-列Layout (biasanya digunakan untuk tablet dan laptop)
- 3-列Layout (hanya untuk desktop)
1-列：
2-列：
3-列：
Kami akan membuat layout tiga kolom dan mengubahnya menjadi layout satu kolom di layar yang kecil:
实例
/* Membuat tiga kolom yang sama dengan berdekatan float */
.column {
float: left;
width: 33.33%;
}
/* Membersihkan floating di belakang kolom */
.row:after {
content: "";
display: table;
clear: both;
}
/* Layout ber responsif - Membuat tiga kolom beraturan, bukannya berjejer di layar yang kecil (lebar 600 pixel atau lebih kecil) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
结果：
Panduan referensi teknologi laman web penuh
Panduan referensiku kami mencakup segala aspek teknologi laman web.
Termasuk teknologi standar W3C: HTML, CSS, XML. dan teknologi lainnya, seperti JavaScript, PHP, SQL.
Alat ujian contoh online
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
方式学习快捷易懂
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
Petunjuk:Untuk membuat layout 2 kolom, ubah lebar menjadi 50%. Untuk membuat layout 4 kolom, gunakan 25%.
Petunjuk:Anda ingin tahu bagaimana aturan @media bekerja? Baca di 查询媒体 CSS Belajar lebih banyak tentang konsep ini di bab ini.
Petunjuk:Satu metode yang lebih modern untuk membuat layout kolom adalah menggunakan CSS Flexbox. Namun, Internet Explorer 10 dan versi sebelumnya tidak mendukungnya. Jika perlu dukungan IE6-10, gunakan floating (seperti di atas).
Untuk mendapatkan informasi lebih lanjut tentang modul layout Flexible Box, baca panduan kami Flexbox CSS Panduan.
Kolom yang berbeda
Konten utama (main content) adalah bagian terbesar dan penting di laman web Anda.
Kasus lebar kolom yang berbeda adalah umum, karena sebagian besar ruang disediakan untuk konten utama. Konten pelengkap (jika ada) biasanya digunakan sebagai navigasi alternatif atau informasi yang berhubungan dengan konten utama. Anda dapat merubah lebar dengan ingat totalnya harus 100%:
实例
.column {
float: left;
}
/* Kolom kiri dan kanan */
.column.side {
width: 25%;
}
/* Kolom tengah */
.column.middle {
width: 50%;
}
/* Layout ber responsif - Membuat tiga kolom beraturan, bukannya berjejer */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
结果：
Panduan referensi teknologi laman web penuh
Panduan referensiku kami mencakup segala aspek teknologi laman web.
Termasuk teknologi standar W3C: HTML, CSS, XML. dan teknologi lainnya, seperti JavaScript, PHP, SQL.
Alat ujian contoh online
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
方式学习快捷易懂
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
页脚
页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：
实例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
结果：
- 页上一 Kilang CSS
- 页下一 Unit CSS
