Ⅰ、問(wèn)題描述：
使用html+css實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄；
**要求：**將導(dǎo)航欄分成八個(gè)小部分，并在鼠標(biāo)放上并不點(diǎn)擊，導(dǎo)航欄背景顏色顯示為黃綠色；
Ⅱ?qū)崿F(xiàn)過(guò)程如下：
1、運(yùn)行軟件VScode，親測(cè)可實(shí)現(xiàn)；
2、運(yùn)行代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
上語(yǔ)句意思：將div盒子外邊距和內(nèi)邊距清零，防止系統(tǒng)會(huì)默認(rèn)值；
有沒(méi)有此語(yǔ)句不太影響結(jié)果；
*/
ul {
list-style: none;
}
/*
上語(yǔ)句意思：將ul列表的默認(rèn)樣式取消；
如果沒(méi)有此語(yǔ)句，則結(jié)果在導(dǎo)航欄中很可能有小黑點(diǎn)；
*/
.box {
width: 960px;
height: 40px;
margin: 100px auto;
}
/*
上語(yǔ)句意思：給div盒子定義
寬度為960px;
高度為40px;
在屏幕居中，外邊距為100px的居中；
*/
.box ul {
overflow: hidden;
}
/*
上語(yǔ)句意思：給div盒子下的ul盒子來(lái)設(shè)置隱藏屬性；
隱藏屬性作用：清除子盒子可能產(chǎn)生的浮動(dòng)，以便按照要求設(shè)置導(dǎo)航欄為8個(gè)部分；
*/
.box ul li {
width: 120px;
height: 40px;
float: left;
font-size: 18px;
text-align: center;
font-family: "Microsoft Yahei";
line-height: 40px;
}
/*
上語(yǔ)句意思：設(shè)置div盒子的ul盒子的子盒子li的屬性值；
寬度為120px;
高度為40px;
浮動(dòng)值為靠左浮動(dòng)；
子號(hào)為18px;
文字對(duì)齊為居中；
文字類(lèi)型為“微軟雅黑”
行高為40px;
*/
.box ul li a {
display: block;
background-color: #ccc;
color: #666;
text-decoration: none;
}
/*
上語(yǔ)句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；
" display: block;"：將行內(nèi)元素變成塊級(jí)元素；
設(shè)置背景顏色為"#ccc"；
字體顏色為"#666";
文本修飾為無(wú)；
*/
.box ul li a:hover {
background-color: yellowgreen;
color: #fff;
font-weight: bold;
}
/*
上語(yǔ)句意思：設(shè)置div盒子的ul盒子的li盒子的子盒子li的屬性值；(設(shè)定當(dāng)鼠標(biāo)放在導(dǎo)航欄背景顏色變化值)
變化后的背景顏色為"yellowgreen"【黃綠色】；
變化后的字體顏色為"#fff"【白色】；
變化后的字體粗細(xì)為"bold"【加粗】；
*/
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">首頁(yè)</a></li>
</ul>
</div>
</body>
</html>
3、結(jié)果展示：
放鼠標(biāo)之前：
當(dāng)鼠標(biāo)放在導(dǎo)航欄第一個(gè)“首頁(yè)”之后：
到此這篇關(guān)于使用Html+Css實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄功能(導(dǎo)航欄遇到鼠標(biāo)切換背景顏色)的文章就介紹到這了,更多相關(guān)html 導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
