Cara Membuat Layout Website dengan tag <div> dan CSS

Kalau kita lihat disana ada 4 id: header, nav, section, dan footer. Semua id diatur oleh css yang letaknya ada dibagian atas. Letaknya diapit oleh tag <style>. Coba kita tengok satu persatu.

#header {
background-color:brown;
color:white;
text-align:center;
padding:5px;
}
Digunakan untuk mengatur tulisan yang letaknya diatas. Kalau di program ini ada tulisan Wisata Batam. Maka tulisan itu mempunyai latar belakang brown. Tulisan nya sendiri bwrwarna putih. Sedangkan perataanya rata tengah. Jarak disekelilinnya sebesar 5 pixel.
Ubah aja warna latar belaang sesuai keinginan, red misalnya. Pakai kode 6 digit hexadesimal juga bisa, #BBBBBB. Atau metode RGB.

#nav {
line-height:45px;
background-color:grey;
height:400px;
width:150px;
float:left;
padding:15px;
}
Jarak spasi antar baris sebesar 45 pixel. Float: left; digunakan agar berada disamping kiri. Coba aja rubah menjadi right. Lihat perbedaanya, apa yang terjadi?
#section {
width:600px;
float:left;
padding:25px;
}
Nah yang ini untuk megatur bagian isi atau konten dari website kita. Lebar bisa disesuaikan, bisa aja dirubah menjadi 800px. Agar sesuai dengan lebar monitor.
#footer {
background-color:brown;
color:white;
clear:both;
text-align:center;
padding:5px;
Ini untuk pengaturan pada bagian footer. Cobalah rubah sesuai dengan keinginan.

Sekian aja tutorial Cara Membuat Layout Website dengan tag div dan CSS dari saya. Semoga bermanfaat, bisa dijadikan referensi. Jangan lupa tulis komentar jika ada pertanyaan.

16 June 2016
Cara Membuat Layout Website dengan tag div dan CSS emerer.com

Cara Membuat Layout Website dengan tag div dan CSS

Cara Membuat Layout Website dengan tag <div> dan CSS [crayon-59c1e5fe4423b388101612/] Kalau kita lihat disana ada 4 id: header, nav, section, dan footer. Semua id diatur oleh […]