The "header", atau bagian atas halaman web, membuat situs Anda unik, memungkinkan untuk berbeda dari orang lain dan mencerminkan spesifik dari proyek Internet Anda. Dengan bantuan tajuk asli dan dibuat dengan baik, Anda dapat mendekorasi dan menyempurnakan halaman web apa pun, dan untuk membuat tajuk sendiri, Anda perlu mempelajari cara mengatur tata letak elemen web ini.
instruksi
Langkah 1
Jika Anda ingin situs Anda memiliki dimensi statis dan konstan, Anda perlu membuat header statis yang tidak berubah tergantung pada perubahan lebar layar. Tentukan lebar dan tinggi header (misalnya, 996x230) dan masukkan gambar latar belakang ke blok atas menggunakan kode CSS berikut, di mana header-1.jpg
latar belakang: # a6b7d3 url (img / header-1.jpg) no-repeat;
lebar: 996 piksel;
tinggi: 230 piksel;
} Kode HTML untuk header jenis ini akan terlihat seperti ini:
Langkah 2
Jika situs dibangun sedemikian rupa sehingga dimensinya disesuaikan dengan lebar layar, header harus diatur dengan mempertimbangkan semua resolusi monitor utama. Lebar maksimum header seperti itu harus 1920 piksel. Untuk menyisipkan header seperti itu, gunakan kode CSS: #header {background: # a6b7d3 url (img / header-2.jpg) no-repeat center; height: 250px;} Kode HTML dalam hal ini mirip dengan yang sebelumnya. Kode CSS telah diubah dalam beberapa parameter - sekarang ia memiliki atribut untuk memusatkan gambar header, yang memungkinkannya menyesuaikan latar belakang dengan lebar layar apa pun.
Langkah 3
Anda juga dapat membuat header yang lebih kompleks, dipotong menjadi beberapa blok latar belakang, yang akan mengubah posisinya tergantung pada ukuran viewport. CSS untuk header seperti itu lebih kompleks dan ekstensif, dan melibatkan pengulangan beberapa elemen latar belakang sesuai dengan dimensi mengambang dari jendela browser tempat situs Anda dapat dilihat.
