Dalam mengatur element HTML dengan CSS kita sanggup memakai Property CSS ialah width (lebar), kita sanggup mengatur value (nilai) dari property width dengan memakai satuan px, persen, em dan lain sebagainya, bila teman-teman bertanya aku sering memakai satuan apa? Saya sanggup katakan bila aku sering memakai dua satuan untuk property witdth ini yaitu, px dan persen. Sebagai tumpuan pertama kita akan memakai property width dengan satuan value nya px. Silahkan teman-teman tulis code berikut ini dan simpan dengan nama file index.html atau dengan nama lain yang teman-teman inginkan, yang penting extensinya harus html.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .kotak { width: 800px; height: 100px; background-color: #5a5a5a; margin: auto; } .satu { width: 400px; height: 80px; float: left; background-color: #bd1818; margin-top: 10px; } .dua { width: 400px; height: 80px; float:left; background-color: #094061; margin-top: 10px; } .satu h2, .dua h2 { text-align: center; color: white; text-transform: uppercase; } </style> </head> <body> <div class="kotak"> <div class="satu"> <h2>Point</h2> </div> <div class="dua"> <h2>Website</h2> </div> </div> </body> </html> Pada tumpuan diatas aku sengaja memperlihatkan tumpuan yang tidak mengecewakan panjang code CSS nya, bukan hanya property width tapi banyak property lain yang aku gunakan, sehingga dengan satu tutorial ini aku berharap teman-teman sanggup referensi penggunaan property lain dari CSS. lantaran aku yakin bila teman-teman sudah mengerti tentang Mengenal Selector, Property dan Value pada CSS Jika sudah mari kita jalankan file index.html diatas pada web browser, maka karenanya akan ibarat berikut ini.
Silahkan teman-teman kecilkan layar web browser pada ukuran lebar nya di bawah 800px maka akan ada efex zoom atau sanggup dikatakan tidak responsive, itu disebabkan karna kita memakai lebar pada kotak 800px dan setiap div didalam kotak tersebut ialah <div class="satu"> dan <div class="dua"> kita memakai 400px. Untuk tumpuan yang lebih mendalam dari pengaturan lebar ini sanggup dilihat pada judul Point-point penting dalam mengatur letak element HTML dengan CSS. Selanjutnya mari kita buatkan tumpuan kedua kita dengan memakai property width dengan satuan valuenya persen, silahkan teman-teman tulis code berikut ini, masih sama aturannya nama file nya bebas uang penting.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> * { font-family: sans-serif; color: black; } .kotak { width: 64%; height: 100px; background-color: #5a5a5a; margin: auto; } .satu { width: 50%; height: 80px; float: left; background-color: #bd1818; margin-top: 10px; } .dua { width: 50%; height: 80px; float:left; background-color: #094061; margin-top: 10px; } .satu h2, .dua h2 { text-align: center; color: white; text-transform: uppercase; } </style> </head> <body> <div class="kotak"> <div class="satu"> <h2>Point</h2> </div> <div class="dua"> <h2>Website</h2> </div> </div> </body> </html> Jika teman-teman jalankan file tersebut hasil nya sama ibarat tumpuan pertama kita, namun ada sedikit perbedaan, silahkan teman-teman kecilkan lebar web browser sekecil apapun maka lebar dari tag <div> akan menyesuaikan dengan lebar web browser inilah yang membedakan px dengan persen. mungkin teman-teman berfikir memakai satuan persen maka website akan responsive, aku rasa tidak lantaran responsive itu memakai media query, untuk mengenal lebih dalam perihal responsive silahkan teman-teman lihat pada tutorial Mengenal Konsep Media Query Dalam Desain Responsive Website. Sekian tutorial dari perihal Mengenal lebih dalam cara mengatur element memakai CSS, biar sanggup membantu teman-teman dalam mempelajari dan menciptakan website.
Sumber http://pointwebsite.blogspot.com/
No comments:
Post a Comment