Cara Membuat Bar Nav Laman Web yang Telus

Dengan menggayakan bar navigasi anda dengan cara tertentu, anda dapat memperkuat jenama dan reka bentuk untuk perniagaan anda. Dengan menggunakan kod HTML dan CSS (Cascading Style Sheet) untuk menentukan penampilan bar navigasi anda, anda dapat membuat penampilan dan nuansa yang konsisten di seluruh laman web anda. Sekiranya anda memilih untuk menjadikan bar navigasi telus, ini bermaksud warna itu akan sama dengan latar atau latar elemen yang mengandunginya.

1

Buat bahagian HTML untuk bar navigasi anda. Dalam fail HTML untuk halaman yang anda gunakan, cari bahagian yang ingin anda tambah bar navigasi. Gunakan elemen untuk memasukkannya seperti berikut:

Di antara tag pembuka dan penutup anda boleh meletakkan pautan navigasi anda.

2

Sertakan elemen penambat untuk setiap pautan navigasi yang anda perlukan. Di dalam elemen "nav", tambahkan elemen penambat untuk setiap pautan yang anda mahukan pengguna dapat melayari. Berikut adalah contoh elemen sauh yang menghubungkan ke bahagian laman web:

Mengenai

Ini menghubungkan ke bahagian dalam laman web yang terletak di folder bernama "about" yang berada di direktori yang sama dengan halaman yang terdapat dalam kod ini. Untuk memaut ke halaman dan bukannya folder, markup akan muncul seperti berikut untuk HTML :

Mengenai

3

Tambahkan bahagian gaya ke halaman anda. Untuk menggayakan bar navigasi, anda memerlukan bahagian untuk kod CSS. Di bahagian kepala halaman anda, sebelum tag penutup, tambahkan satu seperti berikut:

Di dalam ini anda boleh menambahkan deklarasi untuk menggayakan elemen di halaman anda.

4

Gaya penambat. Di bahagian CSS halaman anda, tambahkan deklarasi untuk memberi gaya pada jangkar di bar navigasi anda. Sebagai contoh, untuk menggayakan semua elemen jangkar di dalam dengan "nav" sebagai atribut IDnya, anda boleh menggunakan pemilih berikut:

/ deklarasi gaya /

}

Ini menunjukkan jangkar di semua negeri. Di dalam bahagian ini, anda boleh menambahkan apa sahaja deklarasi gaya yang ingin anda laksanakan, misalnya:

hiasan teks: tiada; lebar: 100px; paparan: blok; terapung: kiri;

Ini adalah sifat standard untuk memaparkan sauh bersebelahan pada garis mendatar. Untuk menggayakan elemen itu sendiri, gunakan sintaks berikut:

lebar: 800px; }

5

Gaya latar belakang. Sekiranya anda tidak menerapkan sifat latar belakang pada bar navigasi anda dalam CSS, ia akan dipaparkan dengan latar belakang yang lutsinar secara lalai. Walau bagaimanapun, ia boleh dipaparkan dengan latar belakang halaman atau elemen lain yang terdapat di belakangnya. Sebagai contoh, pernyataan CSS berikut untuk elemen badan akan menyebabkan gambar latar dipaparkan di belakang bar navigasi:

body {background-image: url ("bgpic.jpg"); }

Kecuali anda menentukan sama ada gambar latar atau warna untuk bar navigasi, gambar tersebut akan dipaparkan dengan latar belakang yang telus.