Bagaimana untuk melaksanakan susun atur pilihan menu menggunakan HTML dan CSS

Tajuk: Menggunakan HTML dan CSS untuk melaksanakan susun atur pilihan menu

Pengenalan:
Dalam pembangunan web, pilihan menu ada dalam web halaman Salah satu elemen biasa. Melalui struktur HTML dan gaya CSS yang munasabah, kami boleh mencapai pelbagai susun atur pilihan menu. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak pilihan menu biasa, dan menyediakan contoh kod khusus untuk rujukan pembaca.

1 Persediaan
Sebelum mula menulis kod HTML dan CSS, kita perlu menentukan struktur asas dan gaya pilihan menu. Biasanya, pilihan menu mengandungi nama menu dan pautan yang sepadan, yang boleh kami gunakan senarai tidak tertib (

) dan item senarai (
• ).

  Contoh kod:

  <ul class="menu">
    <li><a href="#">菜单选项1</a></li>
    <li><a href="#">菜单选项2</a></li>
    <li><a href="#">菜单选项3</a></li>
    ...
  </ul>

  2. Susun atur menu mendatar
  Susun atur menu mendatar ialah susun atur pilihan menu yang paling biasa, dengan pilihan menu disusun pada garisan mendatar.

  Gunakan atribut paparan dan atribut apungan dalam CSS untuk mencapai susun atur menu mendatar.

  Contoh kod:

  .menu li {
    float: left;
  }
  
  .menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
  }
  
  .menu a:hover {
    background-color: #ccc;
  }

  3. Susun atur menu menegak
  Susun atur menu menegak ialah pilihan menu yang disusun secara menegak, dengan setiap pilihan menu menduduki kaedah Susun atur keseluruhan baris. Kita boleh menggunakan atribut paparan dan tetapan lebar untuk melaksanakan susun atur menu menegak.

  Contoh kod:

  .menu li {
    display: block;
    width: 200px;
  }
  
  .menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
  }
  
  .menu a:hover {
    background-color: #ccc;
  }

  4 Susun atur menu lungsur
  Susun atur menu lungsur ialah susun atur pilihan menu biasa apabila tetikus melayang di atas pilihan menu utama , menu lungsur yang sepadan akan dipaparkan.

  Laksanakan reka letak menu lungsur turun melalui CSS pseudo-class:hover.

  Contoh kod:

  <ul class="menu">
    <li><a href="#">菜单选项1</a>
      <ul class="submenu">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        ...
      </ul>
    </li>
    <li><a href="#">菜单选项2</a></li>
    <li><a href="#">菜单选项3</a></li>
    ...
  </ul>

  .menu li {
    float: left;
    position: relative;
  }
  
  .menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
  }
  
  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
  }
  
  .menu li:hover .submenu {
    display: block;
  }

  Ringkasan:
  Dengan menggunakan HTML dan CSS secara rasional, kita boleh mencapai pelbagai susun atur pilihan menu. Melalui kod contoh di atas, kita boleh melaksanakan susun atur menu mendatar, susun atur menu menegak dan susun atur menu lungsur. Pembaca boleh melaraskan kod dengan sewajarnya mengikut keperluan mereka sendiri dan menggunakannya pada projek mereka sendiri. Saya berharap artikel ini dapat memberikan sedikit bantuan kepada pembaca dalam menggunakan HTML dan CSS untuk melaksanakan susun atur pilihan menu.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur pilihan menu menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!