Cara belajar membuat grid sederhana

,

Gambar 0.1 Grid.
Cara membuat grid simple sekali supaya bisa dipahami, gak susah kalo mau belajar, kalo mau hasil yang bagus perlu script yang lebih panjang ini hanya untuk contoh siapa tau ada yang lagi mau belajar. kita pakai float yah, bisa juga pakai inline kalo pakai float hasilnya akan cenderung ke kananan atau kekiri tergantung floatnya. berikut scriptnya.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='application/vnd.wap.xhtml+xml; charset=utf-8' />
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Cara membuat Grid Simple</title>
<style>
*{margin:0;padding:0;}
.left,.right{
width:50%;height:150px;}
.left{
background:red;
float:left;}
.right{background:blue; float:right;}
.div1,
.div2,
.div3,
.div4,
.div5,
.div6{
margin:8px;
width:30%;
height:150px;
float:left;
}
.div1{
background:#000;}
.div2{background:#222}
.div3{background:#444;}
.div4{background:#666}
.div5{background:#888}
.div6{background:#aaa}
</style>
</head>
<body>
<div class='left'></div>
<div class='right'></div>

<div style='clear:both'></div>

<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
<div class='div4'></div>
<div class='div5'></div>
<div class='div6'></div>
</body>
</html>


Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.