溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何用css制作導航欄”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“如何用css制作導航欄”文章能幫助大家解決問題。
1.首先還是老樣子，我們在開發 app 中新建一個 html 文件并且命名為自己喜歡的名字（最好是英文因為可以在之后的工作提中供便利，避免不必要的麻煩），那么我們就來看看代碼部分吧！代碼如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>怎么用css制作導航欄</title> </head> <body> <p>css制作導航欄</p> <ul> <li><a>主頁</a></li> <li><a >地圖</a></li> <li><a >直播</a></li> <li><a >更多</a></li> </ul> </body></html>2.在上面的代碼塊中我們可以看到，我們使用到了ul li a這三個標簽，那么接下來我們在 a 標簽中加入 href=""這個屬性和class類屬性，可以方便我們在點擊導航欄中實習跳轉,在繼續添加 link 標簽為連接 css 做準備。代碼如下：
<html> <head> <meta charset="utf-8"> <title>怎么用css制作導航欄</title> <link href="css/css導航欄.css" rel="stylesheet"/> </head> <body> <p>css制作導航欄</p> <ul> <li><a class="active" href="">主頁</a></li> <li><a href="#">地圖</a></li> <li><a href="#">直播</a></li> <li><a href="#">更多</a></li> </ul> </body></html>3.在完成之后，我們在新建一個 css 文件，在 css 文件中的 ul 中加入list-style-type: none;從而除掉導航前面默認帶的點，設置完成之后在進行設置鼠標滑到之后的一個導航欄變色設置，代碼如下：
ul{ list-style-type: none;/* 去除 li 中的黑色點*/ margin: 0;padding: 0; width: 200px; background-color: antiquewhite;/* 設置整個導航欄的背景 */}li a{ display: block; color: peru; padding: 8px 16px; text-decoration: none;}li a.active{ background-color: palegreen/* 設置第一個導航欄的背景顏色 */}li a:hover:not(.active){/* 設置主頁不會隨著 鼠標的移動改變顏色 */ background-color: gray; color: white;}4.在代碼塊中，小編為大家打了注釋，有不懂得小伙伴們可以在CSS教程中學習，那么完成以上步驟我們就可以得到一個垂直的導航欄截圖如下：
5.當然在平常的運用中我們比較多的是看到橫向的導航欄，如果你要換成橫向的導航欄的話只需要在 CSS 中的ul中添加 overflow：hidden；把width：200px；去掉，在添加一個li的浮動為左浮動。代碼和截圖如下：
ul{
list-style-type: none;/* 去除 li 中的黑色點*/
margin: 0;padding: 0;
overflow: hidden;
background-color: antiquewhite;/* 設置整個導航欄的背景 */
}
li{
float: left;/* 設置左浮動讓文字向右靠攏 */
}
li a{
display: block;
color: peru;
padding: 8px 16px;
text-decoration: none;
}
li a.active{
background-color: palegreen/* 設置第一個導航欄的背景顏色 */
}
li a:hover:not(.active){/* 設置主頁不會隨著 鼠標的移動改變顏色 */
background-color: gray;
color: white;
}關于“如何用css制作導航欄”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
