免費AI編程助手
在我們的日常生活中，我們會在手機和電腦中瀏覽各種各樣的網(wǎng)頁，那么我們看到在不同的網(wǎng)頁中的導(dǎo)航欄都是不一樣的，今天小編就來講講怎么用css制作導(dǎo)航欄，下面是小編分享的導(dǎo)航欄的制作源碼！希望對你的學(xué)習(xí)和問題有所幫助！
1.首先還是老樣子，我們在開發(fā) app 中新建一個 html 文件并且命名為自己喜歡的名字（最好是英文因為可以在之后的工作提中供便利，避免不必要的麻煩），那么我們就來看看代碼部分吧！代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么用css制作導(dǎo)航欄</title>
</head>
<body>
<p>css制作導(dǎo)航欄</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?類屬性，可以方便我們在點擊導(dǎo)航欄中實習(xí)跳轉(zhuǎn),在繼續(xù)添加 ?link? 標簽為連接 css 做準備。代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>怎么用css制作導(dǎo)航欄</title>
<link href="css/css導(dǎo)航欄.css" rel="stylesheet"/>
</head>
<body>
<p>css制作導(dǎo)航欄</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;?從而除掉導(dǎo)航前面默認帶的點，設(shè)置完成之后在進行設(shè)置鼠標滑到之后的一個導(dǎo)航欄變色設(shè)置，代碼如下：
ul{
list-style-type: none;/* 去除 li 中的黑色點*/
margin: 0;padding: 0;
width: 200px;
background-color: antiquewhite;/* 設(shè)置整個導(dǎo)航欄的背景 */
}
li a{
display: block;
color: peru;
padding: 8px 16px;
text-decoration: none;
}
li a.active{
background-color: palegreen/* 設(shè)置第一個導(dǎo)航欄的背景顏色 */
}
li a:hover:not(.active){/* 設(shè)置主頁不會隨著 鼠標的移動改變顏色 */
background-color: gray;
color: white;
}
4.在代碼塊中，小編為大家打了注釋，有不懂得小伙伴們可以在CSS教程中學(xué)習(xí)，那么完成以上步驟我們就可以得到一個垂直的導(dǎo)航欄截圖如下：
5.當然在平常的運用中我們比較多的是看到橫向的導(dǎo)航欄，如果你要換成橫向的導(dǎo)航欄的話只需要在 CSS 中的?ul?中添加 ?overflow：hidden；?把?width：200px；?去掉，在添加一個li的浮動為左浮動。代碼和截圖如下：
ul{
list-style-type: none;/* 去除 li 中的黑色點*/
margin: 0;padding: 0;
overflow: hidden;
background-color: antiquewhite;/* 設(shè)置整個導(dǎo)航欄的背景 */
}
li{
float: left;/* 設(shè)置左浮動讓文字向右靠攏 */
}
li a{
display: block;
color: peru;
padding: 8px 16px;
text-decoration: none;
}
li a.active{
background-color: palegreen/* 設(shè)置第一個導(dǎo)航欄的背景顏色 */
}
li a:hover:not(.active){/* 設(shè)置主頁不會隨著 鼠標的移動改變顏色 */
background-color: gray;
color: white;
}
這就是今天的一個導(dǎo)航欄的介紹與代碼，希望對你的問題和學(xué)習(xí)有所幫助，更多的一個學(xué)習(xí)可以在w3cschool中進行學(xué)習(xí)噢！
