用CSS制作导航栏
让页面更加美观，更便捷
当光标移到列表的方格中，列表的方格会变色
此处为右侧菜单栏↓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #0000FF;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="">主页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">联系</a></li>
<li><a href="">关于</a></li>
</ul>
<div style="margin-left:15%;padding:1px 16px;height:1000px;">
<h2></h2>
<h3></h3>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
