css怎麼做橫向導覽列

使用 CSS 建立橫向導覽列的步驟如下：建立 HTML 導覽結構。應用CSS 樣式：佈局容器：display: flex; justify-content: center; align-items: center;樣式清單：display: flex; list-style-type: none; margin: 0; padding: 0;樣式清單項目： margin-right: 1em;樣式連結：text-decoration: none; color: black;滑鼠懸停狀態：a:hov

如何使用CSS 建立橫向導覽列

建立一個橫向導覽列是大多數網站設計的常見需求。使用CSS，可以透過以下步驟輕鬆實現：

建立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>

應用CSS 樣式：

##1. 佈局容器：

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

• display: flex 允許導覽列成為一個水平排列的容器。
• justify-content: center 將其內容等級置中。
• align-items: center 將其內容垂直置中。
2. 樣式清單：

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

#display: flex

也會將清單轉換為水平容器。
• list-style-type: none
移除項目符號。

margin: 0 和

padding: 0

移除預設間距和填滿。
3. 樣式清單項目：
• <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;css&quot;&gt;li { margin-right: 1em; }&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div>

#margin-right: 1em

在每個清單項目之間新增一些間距。

4. 樣式連結：
• <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;css&quot;&gt;a { text-decoration: none; color: black; }&lt;/code&gt;</pre><div class="contentsignin">登入後複製</div></div>

#text-decoration: none

移除連結底線。

color: black

設定連結文字為黑色。

#########5. 滑鼠懸停狀態：######

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

#########a:hover### 為滑鼠懸停在連結上時設定文字顏色為藍色。 ############結果：#########遵循這些步驟會建立一個水平導航欄，其中項目彼此水平排列，居中顯示於螢幕上。當滑鼠懸停在連結上時，連結文字會變成藍色。 ###

以上是css怎麼做橫向導覽列的詳細內容。更多資訊請關注PHP中文網其他相關文章！