HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<link rel="stylesheet" type="text/css" href="navigation.css">
</head>
<body>
<ul>
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="https://www.google.com">谷歌</a></li>
<li><a href="https://www.360.cn">360</a></li>
<li><a href="https://www.bilibili.com">B站</a></li>
</ul>
</body>
</html>
CSS代码
ul{
list-style-type: none;
/*去掉无序标签前面的效果*/
margin: 0px;
padding: 0px;
/*去掉所有的默认效果边框，只使用自己的定义*/
background-color: cornflowerblue;
width: 200px;
text-align: center;
}
a:link,a:visited{
text-decoration: none;
color: brown;
width: 75px;
text-align: center;
}
/*对标签已有的属性，通过：进行选择，去掉已经进入的网站和没有进入网站的下划线*/
a:hover,a:active{
background-color:forestgreen;
}
/*hover表示鼠标悬浮在导航栏状态*/
li{
display: inline;
padding: 3px;
padding-left: 7px;
padding-right: 7px;
}
效果：
