Bagaimana untuk membuat bar navigasi mendatar dalam css

Langkah-langkah untuk mencipta bar navigasi mendatar menggunakan CSS adalah seperti berikut: Buat struktur navigasi HTML. Gunakan gaya CSS: bekas susun atur: flex-content: tengah-tengah senarai gaya: paparan: flex-style-type: 0; margin-kanan: 1em; pautan gaya: hiasan teks: tiada; warna: hitam; keadaan tetikus: a:hov

Cara menggunakan CSS untuk mencipta bar navigasi mendatar

Membuat navigasi mendatar ialah Keperluan biasa untuk kebanyakan reka bentuk laman web. Menggunakan CSS, ia boleh dicapai dengan mudah dengan mengikuti langkah berikut:

Cipta struktur HTML:

<code class="html"><nav>
  <ul>
    <li><a href="home.html">主页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav></code>

Guna gaya CSS:

1. /code> Membenarkan bar navigasi menjadi bekas yang disusun secara mendatar.

justify-content: center memusatkan kandungannya secara mendatar.

• align-item: center memusatkan kandungannya secara menegak. display: flex 允许导航栏成为一个水平排列的容器。
• justify-content: center 将其内容水平居中。
• align-items: center 将其内容垂直居中。

2. 样式列表：

<code class="css">nav {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

• display: flex 也将列表转换为水平容器。
• list-style-type: none 去除项目符号。
• margin: 0 和 padding: 0 去除默认间距和填充。

3. 样式列表项：

<code class="css">ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}</code>

• margin-right: 1em 在每个列表项之间添加一些间距。

4. 样式链接：

<code class="css">li {
  margin-right: 1em;
}</code>

• text-decoration: none 去除链接下划线。
• color: black 设置链接文本为黑色。

5. 鼠标悬停状态：

<code class="css">a {
  text-decoration: none;
  color: black;
}</code>

• a:hover

2. Senarai gaya:

<code class="css">a:hover {
  color: blue;
}</code>

paparan: flex turut menukar senarai menjadi bekas mendatar.

🎜jenis gaya senarai: tiada Alih keluar mata. 🎜🎜margin: 0 dan padding: 0 alih keluar jarak dan padding lalai. 🎜🎜🎜🎜3. Item senarai gaya: 🎜🎜rrreee🎜🎜margin-kanan: 1em Tambahkan beberapa jarak antara setiap item senarai. 🎜🎜🎜🎜4. Pautan gaya: 🎜🎜rrreee🎜🎜hiasan teks: tiada Alih keluar garis bawah pautan. 🎜🎜warna: hitam Tetapkan teks pautan kepada hitam. 🎜🎜🎜🎜5 Keadaan alih tetikus: 🎜🎜rrreee🎜🎜a:hover Tetapkan warna teks kepada biru apabila tetikus melayang di atas pautan. 🎜🎜🎜🎜Hasil: 🎜🎜🎜Mengikut langkah ini akan mencipta bar navigasi mendatar di mana item disusun secara mendatar antara satu sama lain, berpusat pada skrin. Teks pautan menjadi biru apabila tetikus melayang di atasnya. 🎜

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