Ⅰ、問題描述：
使用html+css實現簡易導航欄；
**要求：**將導航欄分成八個小部分，并在鼠標放上并不點擊，導航欄背景顏色顯示為黃綠色；
Ⅱ實現過程如下：
1、運行軟件VScode，親測可實現；
2、運行代碼：
<!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;
}
/*
上語句意思：將div盒子外邊距和內邊距清零，防止系統會默認值；
有沒有此語句不太影響結果；
*/
ul {
list-style: none;
}
/*
上語句意思：將ul列表的默認樣式取消；
如果沒有此語句，則結果在導航欄中很可能有小黑點；
*/
.box {
width: 960px;
height: 40px;
margin: 100px auto;
}
/*
上語句意思：給div盒子定義
寬度為960px;
高度為40px;
在屏幕居中，外邊距為100px的居中；
*/
.box ul {
overflow: hidden;
}
/*
上語句意思：給div盒子下的ul盒子來設置隱藏屬性；
隱藏屬性作用：清除子盒子可能產生的浮動，以便按照要求設置導航欄為8個部分；
*/
.box ul li {
width: 120px;
height: 40px;
float: left;
font-size: 18px;
text-align: center;
font-family: "Microsoft Yahei";
line-height: 40px;
}
/*
上語句意思：設置div盒子的ul盒子的子盒子li的屬性值；
寬度為120px;
高度為40px;
浮動值為靠左浮動；
子號為18px;
文字對齊為居中；
文字類型為“微軟雅黑”
行高為40px;
*/
.box ul li a {
display: block;
background-color: #ccc;
color: #666;
text-decoration: none;
}
/*
上語句意思：設置div盒子的ul盒子的li盒子的子盒子li的屬性值；
" display: block;"：將行內元素變成塊級元素；
設置背景顏色為"#ccc"；
字體顏色為"#666";
文本修飾為無；
*/
.box ul li a:hover {
background-color: yellowgreen;
color: #fff;
font-weight: bold;
}
/*
上語句意思：設置div盒子的ul盒子的li盒子的子盒子li的屬性值；(設定當鼠標放在導航欄背景顏色變化值)
變化后的背景顏色為"yellowgreen"【黃綠色】；
變化后的字體顏色為"#fff"【白色】；
變化后的字體粗細為"bold"【加粗】；
*/
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
</ul>
</div>
</body>
</html>
3、結果展示：
放鼠標之前：
當鼠標放在導航欄第一個“首頁”之后：
到此這篇關于使用Html+Css實現簡易導航欄功能(導航欄遇到鼠標切換背景顏色)的文章就介紹到這了,更多相關html 導航欄內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
