App下載

怎么用css制作導(dǎo)航欄?導(dǎo)航欄的制作源碼!

猿友 2021-05-26 14:22:49 瀏覽數(shù) (3401)
反饋

在我們的日常生活中,我們會(huì)在手機(jī)和電腦中瀏覽各種各樣的網(wǎng)頁(yè),那么我們看到在不同的網(wǎng)頁(yè)中的導(dǎo)航欄都是不一樣的,今天小編就來(lái)講講怎么用css制作導(dǎo)航欄,下面是小編分享的導(dǎo)航欄的制作源碼!希望對(duì)你的學(xué)習(xí)和問(wèn)題有所幫助!

1.首先還是老樣子,我們?cè)陂_(kāi)發(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?類(lèi)屬性,可以方便我們?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.在代碼塊中,小編為大家打了注釋?zhuān)胁欢眯』锇閭兛梢栽?a href="http://m.hgci.cn/css/" target="_blank" style="background-color: rgb(255, 255, 255);">CSS教程中學(xué)習(xí),那么完成以上步驟我們就可以得到一個(gè)垂直的導(dǎo)航欄截圖如下:

導(dǎo)航欄結(jié)果截圖

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;
}

橫向?qū)Ш綏l這就是今天的一個(gè)導(dǎo)航欄的介紹與代碼,希望對(duì)你的問(wèn)題和學(xué)習(xí)有所幫助,更多的一個(gè)學(xué)習(xí)可以在w3cschool中進(jìn)行學(xué)習(xí)噢!


0 人點(diǎn)贊