Statement: The following content is a summary of personal study, the original intention is to facilitate their own study and review records. If there are any errors, please correct me!
The realization effect of simple navigation bar:
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
/*使a元素从行内元素变为块状元素，从而设置宽和高*/
display: inline-block;
width: 80px;
height: 35px;
/*高度等于行高，文字垂直方向居中*/
line-height: 35px;
background-color: rgb(101,101,101);
/*文字水平居中*/
text-align: center;
color: white;
}
a:hover {
background-color: rgb(201,192,211);
color: rgb(101,101,101);
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">前端</a>
<a href="#">后端</a>
<a href="#">工具使用</a>
<a href="#">关于我</a>
</body>
</html>