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
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