pada kesempatan ini saya akan mencoba membuat layout sederhana menggunakan css.
buat dua buah fail. satu diberi nama
.index.html.
.style.css
.software editor notepad 2
.software xamp untuk melihat hasil di broser
gb hasil pembuatan fail
fail style.css edit dengan notepad 2 sehingga hasilnya seperti di bawah ini.
===================================================
@charset "utp-8";
body{
background-color:GREY;
COLOR:RED;
}
#halaman{
width:960px;
height:200px;
background-color:blue;
}
=================================================
gb hasil editan di nopad 2
isi fail.style.css
gb pail css yang di edit di notepad 2
setelah membuat dua pail tersebut sekarang coba lihat di mozila maka kasil ya akan seperti di bawah ini
gb di mozila hasil pembuatan 2 pail tersebut.
membuat kepala pada web
edit style.css seperti di bawah ini
==================================
@charset "utp-8";
body{
background-color:GREY;
COLOR:RED;
margin-top:0px;/*agar
halaman menepi ke atas tanpa batas*/
margin-botton:0px;/*agar
halaman menepi ke bawah tanpa bawah*/
}
#halaman{
width:960px;
height:auto;/*agar
halaman disesuaikan dengan tex yang di tulis*/
background-color:blue;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar
halaman menepi ke atas tanpa batas*/
margin-bottom:0px;/*agar
halaman menepi ke bawah tanpa batas*/
}
#halaman #kepala{ /*agar terbaca di index.html harus ada div kepala
*/
width:950px;/*kepala
berada di dalam halaman jadi 950px*/
height:140px;
background-color:green;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar
halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
|
=====================================================
edit index.html
=====================================================
================================================================== untuk melihat hasil lihat di broser.
Tidak ada komentar:
Posting Komentar