Rancang Bangun Situs Web CSS

Tata letak situs web

Situs web biasanya dibagi menjadi judul utama, menu, konten, dan kaki situs:

Ada banyak desain tata letak yang berbeda yang dapat dipilih. Namun, struktur di atas adalah salah satu struktur yang paling sering digunakan, dan kita akan mempelajari secara mendalam di tutorial ini.

Judul utama

Judul utama (header) biasanya berada di bagian atas situs web (atau di bawah menu navigasi paling atas). Biasanya mengandung logo atau nama situs:

Contoh

.header {
  background-color: #F1F1F1;
  text-align: center;
  Ketinggian isian: 20px;
}

Hasil:

Judul utama

Coba Sendiri

Baringan navigasi

Baringan navigasi mengandung daftar tautan untuk membantu pengunjung mengelilingi situs web Anda:

Contoh

/* Wadah navbar */
.topnav {
  Lebih banyak: tak terbatas;
  Latar belakang warna: #333;
}
/* Tautan Navbar */
.topnav a {
  float: left;
  Tampilan: blok;
  Warna: #f2f2f2;
  text-align: center;
  Ketinggian isian: 14px 16px;
  Tandai teks: tak ada;
}
/* Perubahan warna tautan saat di hover */
.topnav a:hover {
  Latar belakang warna: #ddd;
  Warna: hitam;
}

Hasil:

Coba Sendiri

Konten

Pemilihan tata letak biasanya tergantung pengguna yang diinginkan. Tata letak yang paling umum adalah salah satu dari berikut ini (atau gabungkannya):

  • 1-kolomLayout (biasanya digunakan untuk peramban mobile)
  • 2-kolomLayout (biasanya digunakan untuk tablet dan laptop)
  • 3-kolomLayout (hanya untuk desktop)

1-kolom:

2-kolom:

3-kolom:

Kami akan membuat layout tiga kolom dan mengubahnya menjadi layout satu kolom di layar yang kecil:

Contoh

/* Membuat tiga kolom yang sama, berdekatan dan mengambang */
.column {
  float: left;
  width: 33.33%;
}
/* Menghapus floating di belakang kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Layout responsif - membuat tiga kolom beraturan, bukannya berjejer di layar yang kecil (lebar 600 pixel atau kurang) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Hasil:

Panduan referensi teknologi situs web yang lengkap

Panduan referensi kami mencakup segala aspek teknologi situs web.

Termasuk standar teknologi W3C: HTML, CSS, XML. Dan teknologi lainnya, seperti JavaScript, PHP, SQL.

Alat uji contoh online

Di CodeW3C.com, kami menyediakan ribuan contoh.

Dengan menggunakan editor online kami, Anda dapat mengedit contoh ini dan menguji kode.

Cara Belajar yang Cepat dan Mudah Dimengerti

Satu saat seperti emas, jadi, kami menyediakan konten pelatihan yang cepat dan mudah dimengerti.

Di sini, Anda dapat memperoleh pengetahuan yang Anda butuhkan dengan cara yang mudah dan mudah dimengerti.

Coba Sendiri

Petunjuk:Untuk membuat layout 2 kolom, tingkatkan lebar menjadi 50%. Untuk membuat layout 4 kolom, gunakan 25%.

Petunjuk:Apakah Anda ingin tahu bagaimana aturan @media bekerja? Baca di Kueri Media CSS Belajar lebih banyak tentang konsep yang relevan di bab ini.

Petunjuk:Metode yang lebih modern untuk membuat layout kolom adalah menggunakan CSS Flexbox. Namun, Internet Explorer 10 dan versi sebelumnya tidak mendukungnya. Jika diperlukan dukungan IE6-10, gunakan floating (seperti yang ditunjukkan 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 situs web Anda.

Kondisi lebar kolom yang berbeda adalah umum, karena sebagian besar ruang disisihkan untuk konten utama. Konten pendukung (jika ada) biasanya digunakan sebagai navigasi alternatif atau informasi yang berhubungan dengan konten utama. Anda dapat merubah lebar dengan ingat totalnya harus 100%:

Contoh

.column {
  float: left;
}
/* Kolom kiri dan kanan */
.column.side {
  width: 25%;
}
/* Kolom tengah */
.column.middle {
  width: 50%;
}
/* Layout responsif - membuat tiga kolom beraturan, bukannya berjejer */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Hasil:

Panduan referensi teknologi situs web yang lengkap

Panduan referensi kami mencakup segala aspek teknologi situs web.

Termasuk standar teknologi W3C: HTML, CSS, XML. Dan teknologi lainnya, seperti JavaScript, PHP, SQL.

Alat uji contoh online

Di CodeW3C.com, kami menyediakan ribuan contoh.

Dengan menggunakan editor online kami, Anda dapat mengedit contoh ini dan menguji kode.

Cara Belajar yang Cepat dan Mudah Dimengerti

Satu saat seperti emas, jadi, kami menyediakan konten pelatihan yang cepat dan mudah dimengerti.

Di sini, Anda dapat memperoleh pengetahuan yang Anda butuhkan dengan cara yang mudah dan mudah dimengerti.

Coba Sendiri

Kaki Halaman

Kaki halaman berada di dasar halaman. Ini biasanya berisi informasi seperti hak cipta dan kontak:

Contoh

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Hasil:

Kaki Halaman

Coba Sendiri

Tatanan Situs Berespon

Dengan menggunakan kode CSS di atas, kami membuat tatanan situs yang berespon, yang akan berubah antara dua kolom dan kolom penuh berdasarkan lebar layar:

Coba Sendiri