Bagaimana untuk membuat bar navigasi mendatar dalam css

下次还敢
Lepaskan: 2024-04-25 12:06:18
asal
957 orang telah melayarinya

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

Bagaimana untuk membuat bar navigasi mendatar dalam css

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>
Salin selepas log masuk

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>
Salin selepas log masuk
  • display: flex 也将列表转换为水平容器。
  • list-style-type: none 去除项目符号。
  • margin: 0padding: 0 去除默认间距和填充。

3. 样式列表项:

<code class="css">ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}</code>
Salin selepas log masuk
  • margin-right: 1em 在每个列表项之间添加一些间距。

4. 样式链接:

<code class="css">li {
  margin-right: 1em;
}</code>
Salin selepas log masuk
  • text-decoration: none 去除链接下划线。
  • color: black 设置链接文本为黑色。

5. 鼠标悬停状态:

<code class="css">a {
  text-decoration: none;
  color: black;
}</code>
Salin selepas log masuk
  • a:hover

2. Senarai gaya:

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

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan