Bagaimana untuk melaksanakan susun atur tab navigasi mendatar menggunakan HTML dan CSS-html tutorial-php.cn

Bagaimana untuk melaksanakan susun atur tab navigasi mendatar menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-28 08:06:50

asal

976 orang telah melayarinya

Bagaimana untuk melaksanakan susun atur tab navigasi mendatar menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk melaksanakan reka letak label navigasi mendatar

Imej muka depan

Kini, banyak tapak web menggunakan reka letak label navigasi mendatar ini ringkas dan jelas, mudah dinavigasi dan digunakan. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak label navigasi mendatar dan memberikan contoh kod khusus.

Mula-mula, mari kita lihat struktur kod HTML. Lazimnya, susun atur tab navigasi mendatar terdiri daripada bekas bar navigasi luar dan berbilang tab navigasi. Berikut ialah contoh kod HTML yang mudah:

<!DOCTYPE html>
<html>
<head>
  <title>水平导航标签布局</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>
</body>
</html>

Salin selepas log masuk

Dalam kod HTML ini, kami mencipta elemen div yang dipanggil "navbar" dan meletakkan senarai tidak tertib di dalamnya. Setiap item senarai (elemen li) mengandungi pautan navigasi (elemen).

Seterusnya, mari kita lihat gaya kod CSS. Dalam CSS, kita boleh menggunakan "display: inline-block;" untuk mencapai kesan susunan mendatar. Berikut ialah contoh kod CSS mudah:

.navbar {
  background-color: #f1f1f1;
  padding: 10px;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin-right: 10px;
}

.navbar li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

.navbar li a:hover {
  background-color: #333;
  color: #fff;
}

Salin selepas log masuk

Dalam kod CSS ini, kami mula-mula menetapkan warna latar belakang dan padding untuk bekas bar navigasi (.navbar). Seterusnya, kami melakukan beberapa tetapan gaya pada senarai tidak tertib (ul), termasuk mengalih keluar gaya lalai item senarai dan menyusun item senarai secara mendatar.

Tetapan gaya untuk pautan navigasi (elemen) termasuk mengalih keluar garis bawah, menetapkan warna teks dan pelapik.

Akhir sekali, kami menetapkan warna latar belakang dan warna teks untuk keadaan alih tetikus pautan navigasi untuk meningkatkan pengalaman pengguna.

Kini, kami boleh melaksanakan susun atur label navigasi mendatar yang mudah dengan menggabungkan kod HTML dan CSS. Dengan melaraskan gaya dalam kod CSS, kami juga boleh mereka bentuk dan menyesuaikan lebih lanjut mengikut keperluan.

Ringkasan:

Artikel ini memperkenalkan cara melaksanakan reka letak label navigasi mendatar menggunakan HTML dan CSS. Reka letak tab navigasi mendatar ialah susun atur yang ringkas dan jelas yang mudah dinavigasi dan digunakan. Dengan menggunakan atribut paparan: inline-block, kita boleh mencapai kesan susunan mendatar dengan mudah. Pada masa yang sama, kami juga menyediakan contoh kod HTML dan CSS khusus, dengan harapan dapat membantu anda apabila melaksanakan reka letak label navigasi mendatar.

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