Cara Memasukkan Header Anda Sendiri Di Laman Web Ini

Isi kandungan:

Cara Memasukkan Header Anda Sendiri Di Laman Web Ini
Cara Memasukkan Header Anda Sendiri Di Laman Web Ini

Video: Cara Memasukkan Header Anda Sendiri Di Laman Web Ini

Video: Cara Memasukkan Header Anda Sendiri Di Laman Web Ini
Video: Menambahkan header, footer dan css 2024, Mungkin
Anonim

"Header", atau bahagian atas halaman web, menjadikan laman web anda unik, membolehkannya berbeza dari yang lain dan mencerminkan spesifik projek Internet anda. Dengan bantuan header yang asli dan dibuat dengan baik, anda boleh menghias dan menyempurnakan mana-mana halaman web, dan untuk membuat header sendiri, anda perlu belajar bagaimana mengatur elemen web ini.

Cara memasukkan header anda sendiri di laman web ini
Cara memasukkan header anda sendiri di laman web ini

Arahan

Langkah 1

Sekiranya anda mahu laman web anda mempunyai dimensi statik dan tetap, anda perlu membuat tajuk statik yang tidak berubah bergantung pada perubahan lebar skrin. Tentukan lebar dan tinggi tajuk (misalnya, 996x230) dan masukkan gambar latar ke blok atas menggunakan kod CSS berikut, di mana header-1.jpg

latar belakang: # a6b7d3 url (img / header-1.jpg) tidak diulang;

lebar: 996 piksel;

tinggi: 230px;

} Kod HTML untuk tajuk jenis ini akan kelihatan seperti ini:

Langkah 2

Sekiranya laman web ini dibina sedemikian rupa sehingga dimensinya disesuaikan dengan lebar layar, header harus diatur dengan mengambil kira semua resolusi monitor utama. Lebar maksimum header seperti itu mestilah 1920 piksel. Untuk memasukkan tajuk seperti itu, gunakan kod CSS: #header {background: # a6b7d3 url (img / header-2.jpg) pusat tanpa ulangan; tinggi: 250px;} Kod HTML dalam kes ini serupa dengan yang sebelumnya. Kod CSS telah diubah dalam beberapa parameter - sekarang memiliki atribut untuk memusatkan gambar header, yang memungkinkannya menyesuaikan latar belakang dengan lebar layar mana pun.

Langkah 3

Anda juga boleh membuat tajuk yang lebih kompleks, dipotong menjadi beberapa blok latar belakang, yang akan mengubah kedudukannya bergantung pada ukuran ruang pandang. CSS untuk tajuk seperti itu lebih kompleks dan luas, dan melibatkan pengulangan beberapa elemen latar belakang sesuai dengan dimensi tetingkap penyemak imbas di mana laman web anda dapat dilihat.

Disyorkan: