Cara membuat bar navigasi dalam dreamweaver

Untuk mencipta bar navigasi Dreamweaver, ikut langkah berikut: Buat dokumen HTML dan masukkan bekas navigasi DIV (class="nav-container"). Buat senarai tidak tersusun dan senaraikan item dalam bekas dan tambah elemen utama yang mengandungi pautan. Bekas bar navigasi gaya, senarai dan pautan dalam helaian gaya CSS.

Membuat bar navigasi dalam Dreamweaver

Langkah 1: Buat dokumen HTML baharu

1. Dalam Dreamweaver, pilih Fail >
2. Masukkan nama fail yang dikehendaki dalam kotak dialog Dokumen HTML Baharu dan klik Cipta.

Langkah 2: Masukkan Bekas Navigasi

1. Letakkan kursor pada lokasi yang dikehendaki dalam kod HTML.
2. Dalam menu Sisip, pilih Umum > DIV.
3. Dalam kotak dialog "Sisipkan DIV", masukkan kelas CSS "nav-container" dan klik "OK".

Langkah 3: Buat pautan navigasi

1. Dalam DIV "bekas nav", masukkan senarai tidak tertib (
   ).
   • Tambah item senarai (
   • ), setiap item senarai sepadan dengan pautan navigasi.
   • Dalam setiap item senarai, masukkan elemen sauh () yang mengandungi alamat pautan dan teks paparan.

<code class="html"><div class="nav-container">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div></code>

Langkah 4: Gayakan bar navigasi

1. Dalam helaian gaya CSS, tambahkan gaya untuk kelas "bekas navigasi", termasuk penampilan keseluruhan bar navigasi (seperti warna latar belakang, fon dan saiz teks).
2. Tambah gaya pada kelas "nav-container ul" dan "nav-container li" untuk menentukan gaya pautan navigasi.
3. Tambahkan gaya pada kelas "nav-container a" dan tetapkan gaya pautan navigasi, termasuk keadaan tuding dan keadaan aktif.

Contoh Gaya CSS

<code class="css">.nav-container {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.nav-container ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

.nav-container li {
  padding: 0 20px;
}

.nav-container a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s ease-in-out;
}

.nav-container a:hover {
  color: #ccc;
}

.nav-container a.active {
  color: #000;
  background-color: #ccc;
}</code>

Atas ialah kandungan terperinci Cara membuat bar navigasi dalam dreamweaver. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!