Bagaimana untuk melakukan navigasi halaman web dalam html

Langkah: 1. Buat struktur dokumen HTML 2. Tambah bekas bar navigasi 3. Buat pautan navigasi 4. Tambah gaya pada bar navigasi, dsb.

HTML ialah bahasa penanda yang digunakan untuk mencipta struktur dan kandungan halaman web. Untuk membuat navigasi halaman web menggunakan HTML, langkah berikut diperlukan:

Buat struktur dokumen HTML: Isytihar jenis dokumen menggunakan "!DOCTYPE html" di kepala dokumen dan cipta struktur dokumen dalam tag "html" .

Tambahkan bekas bar navigasi: Gunakan teg "nav" untuk membuat bekas bar navigasi. Bar navigasi boleh diletakkan di kepala halaman web atau mana-mana lokasi lain yang sesuai.

Buat pautan navigasi: Di dalam bekas bar navigasi, buat senarai tidak tertib menggunakan tag ul dan li dan tambah pautan navigasi dalam setiap item senarai. Contohnya:

<ul>
   <li><a href="#">首页</a></li>
   <li><a href="#">关于我们</a></li>
   <li><a href="#">产品</a></li>
   <li><a href="#">联系我们</a></li>
</ul>

Dalam teg a, gunakan atribut href untuk menambah URL pautan navigasi.

Bar Navigasi Gaya: Gunakan CSS untuk menggayakan bar navigasi anda untuk menjadikannya lebih menarik dan mudah digunakan. Bekas dan pautan bar navigasi boleh dipilih dan digayakan menggunakan pemilih CSS. Contohnya:

nav {
   background-color: #333;
   color: #fff;
   padding: 10px;
}
nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
nav li {
   display: inline;
   margin-right: 10px;
}
nav a {
   text-decoration: none;
   color: #fff;
}
nav a:hover {
   color: #ff9900;
}

Dalam contoh di atas, kami menetapkan warna latar belakang, warna teks, padding dan gaya lain bar navigasi. Pautan navigasi juga digayakan supaya warna pautan akan berubah apabila tetikus dituding di atasnya.

Tingkatkan bar navigasi: Anda boleh menambah lebih banyak pautan navigasi atau submenu mengikut keperluan. Anda boleh menggunakan senarai tidak tersusun bersarang untuk membuat submenu. Contohnya:

<ul>
   <li><a href="#">首页</a></li>
   <li>
      <a href="#">关于我们</a>
      <ul>
         <li><a href="#">公司简介</a></li>
         <li><a href="#">团队</a></li>
      </ul>
   </li>
   <li><a href="#">产品</a></li>
   <li><a href="#">联系我们</a></li>
</ul>

Dalam contoh di atas, kami mencipta submenu di bawah pautan navigasi "Perihal Kami" dan menambah pautan "Profil Syarikat" dan "Pasukan".

Dengan langkah di atas, kita boleh membuat navigasi web yang mudah menggunakan HTML. Bergantung pada keperluan dan keperluan reka bentuk, gaya dan kefungsian bar navigasi boleh dilanjutkan dan dipertingkatkan lagi.

Atas ialah kandungan terperinci Bagaimana untuk melakukan navigasi halaman web dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!