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