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>
padding: 0
alih keluar jarak dan padding lalai. 🎜🎜🎜🎜3. Item senarai gaya: 🎜🎜rrreee🎜🎜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!