tag ' di dalamnya dan tetapkan kelas ' tajuk ” untuk memaparkan kandungan “Selamat Datang ke Linuxhint!”:

kelas = 'kepala' >

< h1 kelas = 'tajuk' > Selamat datang ke Linuxhint! < / h1 >

< / pengepala>

Selepas itu, pilih '

” kelas teg dan tetapkan gaya berikut:

---

---

.kepala {

imej latar belakang: url ( '../bg.jpg' ) ;

latar belakang- saiz : penutup;

background-repeat: tiada-ulang;

warna : asap putih;

latar belakang-kedudukan: atas;

padding: 0px 20px 20px 20px;

}

Penjelasan kod di atas disebutkan di bawah:

• Mula-mula, tetapkan imej ' bg.jpg ' sebagai latar belakang untuk bahagian pengepala menggunakan ' imej latar belakang ” harta benda.
• Seterusnya, ' saiz latar belakang ” dan “ latar belakang-ulang sifat ” digunakan untuk menetapkan saiz imej dan menghentikan pengulangan imej, masing-masing.
• Selepas itu, tetapkan warna teks dan kedudukan imej ke atas dengan bantuan “ warna ” dan “ kedudukan latar belakang ” hartanah.
• Pada akhirnya, ' padding harta ” digunakan untuk menetapkan ruang antara kandungan pengepala dan sempadan.

Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:

Output di atas memaparkan bahawa bahagian pengepala dibuat dan gaya CSS digunakan padanya.

Langkah 2: Buat Bar Navigasi

Pengepala juga boleh mengandungi bar navigasi dalam kebanyakan kes. Untuk penciptaan bar navigasi HTML ' teg ” boleh menjadi sangat berguna. Itulah sebabnya, tambah item navbar menggunakan ' ” tag dan tetapkan kelas “ bertindak ”:

kelas = 'kepala' >



< a kelas = 'bertindak' href = '#' >Rumah< / a >

< a kelas = 'bertindak' href = '#' >Perkhidmatan< / a >

< a kelas = 'bertindak' href = '#' >Tentang Kami< / a >

< a kelas = 'bertindak' href = '#' >Hubungi Kami< / a >

< a kelas = 'bertindak' href = '#' >Ketibaan Baru< / a >

< / tidak>

< br >< br >

< h1 kelas = 'tajuk' > Selamat datang ke Linuxhint! < / h1 >

< / pengepala>

Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:

Output di atas menggambarkan bahawa item navbar ' Rumah ”, “ Perkhidmatan ”, “ Tentang kita ”, “ Hubungi Kami ” dan “ Ketibaan Baru ” telah dicipta.

Langkah 3: Gunakan Gaya pada Item Navbar

Untuk menggayakan item bar navigasi, pilih ' bertindak ” dan tetapkan sifat gaya CSS berikut:

.bertindak {

hiasan teks: tiada;

warna : putih;

paparan: blok;

padding:15px;

fon- saiz : besar;

terapung: kiri;

jidar: 0px 20px;

}

Penjelasan kod di atas ialah:

• Pertama, ' hiasan teks harta ” ditetapkan kepada “tiada” untuk mengalih keluar penggayaan pratakrif “ ” tag.
• Untuk meningkatkan keterlihatan teks untuk pengguna, ' putih ” dan “ besar nilai ' diberikan kepada ' warna ' dan juga ' Saiz huruf ” harta benda.
• Selepas itu, ' paparan ” dan “ terapung ' sifat membantu ' teg ” untuk muncul pada baris yang sama.
• Pada akhirnya, ' padding ” dan “ margin nilai sifat ” digunakan untuk mencipta ruang antara setiap teg “ ”.

Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:

Output di atas menggambarkan bahawa item navbar kini digayakan.

Langkah 4: Tambahkan Kesan Tuding pada Item Navbar

Seperti dalam output di atas, kesan hover tidak tersedia pada item navbar. Untuk menambah kedua-duanya, pilih ' tajuk 'kelas yang diberikan kepada '

” tag. Selepas itu, tambahkan ' : berlegar 'pemilih dengan ' bertindak ” untuk menggunakan kesan tuding pada item navbar:

.act:hover {

sempadan : 2px putih pepejal;

warna : biru ungu;

}

.heading {

teks- selaraskan : pusat;

margin: 18 % 0px;

}

Penjelasan kod di atas disediakan di bawah:

• Mula-mula, tetapkan ' sempadan ” daripada jenis pepejal 2px dan tetapkan putih “ warna ”. Bersama-sama dengannya, tetapkan “ biru ungu ” warna hanya apabila tetikus dilegar oleh pengguna pada item navbar.
• Seterusnya, pilih “ tajuk kelas ” dan tetapkan penjajarannya kepada “ pusat ” dan berikan sedikit margin untuk menjadikan bahagian itu kelihatan lebih besar.

Selepas melaksanakan kod di atas, rupa akhir pengepala kelihatan seperti ini:

Output di atas memaparkan bahawa pengepala dibuat menggunakan HTML dan CSS.

Kesimpulan

Dalam fail HTML, teg '

' digunakan untuk membuat bahagian untuk pengepala. Selepas itu, pengguna boleh menggunakan sifat CSS seperti padding dan imej latar belakang untuk meningkatkan bahagian pengepala. Ia digunakan untuk semua elemen pengepala seperti bar navigasi. Untuk membuat bar navigasi, pengguna boleh menggunakan teg '