Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Tata Letak Situs Web CSS


Tata Letak Situs Web

Sebuah situs web sering dibagi menjadi header, menu, konten dan footer:

Ada banyak sekali desain tata letak yang berbeda untuk dipilih. Namun, struktur di atas, adalah salah satu yang paling umum, dan kita akan melihatnya lebih dekat dalam tutorial ini.


tajuk

Header biasanya terletak di bagian atas situs web (atau tepat di bawah menu navigasi atas). Biasanya berisi logo atau nama situs web:

Contoh

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

Hasil

Header



Bilah Navigasi

Bilah navigasi berisi daftar tautan untuk membantu pengunjung menavigasi situs web Anda:

Contoh

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Hasil


Isi

Tata letak di bagian ini, seringkali tergantung pada pengguna target. Tata letak yang paling umum adalah salah satu (atau menggabungkannya) dari berikut ini:

  • 1 kolom (sering digunakan untuk browser seluler)
  • 2 kolom (sering digunakan untuk tablet dan laptop)
  • Tata letak 3 kolom (hanya digunakan untuk desktop)

1-kolom:

 

2-kolom:

 

3-kolom:

Kami akan membuat tata letak 3 kolom, dan mengubahnya menjadi tata letak 1 kolom di layar yang lebih kecil:

Contoh

/* Create three equal columns that float next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Hasil

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Tips: Untuk membuat tata letak 2 kolom, ubah lebar menjadi 50%. Untuk membuat layout 4 kolom, gunakan 25%, dst.

Tip: Apakah Anda bertanya-tanya bagaimana aturan @media bekerja? Baca lebih lanjut tentangnya di bab Kueri Media CSS kami .

Tip: Cara yang lebih modern untuk membuat tata letak kolom, adalah dengan menggunakan CSS Flexbox. Namun, ini tidak didukung di Internet Explorer 10 dan versi sebelumnya. Jika Anda memerlukan dukungan IE6-10, gunakan float (seperti yang ditunjukkan di atas).

Untuk mempelajari lebih lanjut tentang Modul Tata Letak Kotak Fleksibel, baca bab Flexbox CSS kami .


Kolom Tidak Sama

Konten utama adalah bagian terbesar dan terpenting dari situs Anda.

Ini umum terjadi dengan lebar kolom yang tidak sama , sehingga sebagian besar ruang dicadangkan untuk konten utama. Konten samping (jika ada) sering digunakan sebagai navigasi alternatif atau untuk menentukan informasi yang relevan dengan konten utama. Ubah lebar sesuka Anda, hanya perlu diingat bahwa totalnya harus mencapai 100%:

Contoh

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Hasil

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...


catatan kaki

Footer ditempatkan di bagian bawah halaman Anda. Ini sering berisi informasi seperti hak cipta dan info kontak:

Contoh

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

Hasil

Footer

Tata Letak Situs Web Responsif

Dengan menggunakan beberapa kode CSS di atas, kami telah membuat tata letak situs web responsif, yang bervariasi antara dua kolom dan kolom lebar penuh tergantung pada lebar layar:

Pernah mendengar tentang W3Schools Spaces ? Di sini Anda dapat membuat situs web Anda dari awal atau menggunakan template, dan menghostingnya secara gratis.

Mulai gratis

* tidak perlu kartu kredit