Kali ini saya akan membahas cara membuat Box Model dengan perintah Div.
Langsung saja
1. Pertama buka Sublime Text atau bisa juga text editor lainnya
2. Ketik script css dibawah ini
note: -background body nya berwarna abu-abu
-font/tulisan warna merah
-lebar 200pixel
-tinggi 200pixel
-border 3pixel & berwarna hitam
-margin automatic, maksudnya margin tersebut telah diperhitungkan dengan browser contoh : margin: 0 auto;
-padding automatic
Hasil dari script diatas sudah jadi=>
Letak div berada di tengah
3. Membuat letak box model di sebelah kiri atau kanan, saya menggunakan di bagian sisi kiri. Kalian bisa ketik script berikut:
note: -background body nya berwarna abu-abu
-font/tulisan warna merah
-lebar 200pixel
-tinggi 200pixel
-border 3pixel & berwarna hitam
-padding automatic
-margin 1pixel dari kiri
Hasilnya akan seperti ini =>
box modelnya sudah berada di sisi kiri
Tambahan untuk kalian yang ingin mengubah gaya border, saya menggunakan gaya border titik-titik. Kalian bisa tambahkan perintah ini:
Hasilnya :
4. Jika sudah, buat script html nya yaitu properti div class agar box model dapat muncul di browser. Scriptnya seperti berikut:
Lalu tekan ctrl+s
buka browser dan tampilan dari seluruh gabungan script diatas akan menjadi seperti ini:
Sekian dari saya. Semoga artikel ini dapat bermanfaat & membantu dan tidak lupa terimakasih telah berkunjung ke blog saya. ^_^
Wassalamualaikum wr.wb
0 comments: