Referensi Layout Website Responsif
Di sini kita hanya menggunakan teknik persentase pada elemen. Ini adalah modal awal yang harus Anda pahami sebelum melangkah ke media queries:

Layout Holy Grail
Simpan Gambar

Dua Kolom Sidebar Kanan
Simpan Gambar

Dua Kolom Sidebar Kiri
Simpan Gambar

Layout Blog Tiga Kolom
Simpan Gambar

Layout Halaman Berganda
Simpan Gambar

Layout Halaman Penuh
Simpan Gambar
Seperti halnya width dan height, nilai padding dan margin juga dapat didefinisikan dalam persentase.

Simpan Gambar

Simpan Gambar

Simpan Gambar

Simpan Gambar

Simpan Gambar

Simpan Gambar
Seperti halnya width dan height, nilai padding dan margin juga dapat didefinisikan dalam persentase.
5 Comments:
Wah Makin Mengenai sasaran sekarang tutornya ini yang di tunggu tunggu
By
Sinto, at Wednesday, October 26, 2011 at 3:42:00 PM GMT+7
Wah, mantab nih tutorialnya. Tapi salahnya aku ga bisa buat template, padahal udah hampir setahun ngeblog.. :(
By
Bukit ampai, at Thursday, October 27, 2011 at 8:41:00 AM GMT+7
makasih info dan tutorialnya...
sangat membantu
By
Piyen, at Thursday, October 27, 2011 at 9:32:00 AM GMT+7
untuk menu navigasi aku masih sulit meletakkan media querienya. gimana nih bang?
By
Pulung, at Monday, October 1, 2012 at 11:21:00 AM GMT+7
Ini dia yang dicari \o/ soalnya kadang suka bingung nentuin ukuran layoutnya, mesti meraba-raba dulu deh :D .. Hatur nuhun ahh :)
By
Unknown, at Saturday, August 3, 2013 at 8:32:00 PM GMT+7
Post a Comment
<< Home