HTML——制作⼀个简易菜单栏识点写在注释中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MENU</title>
<style type="text/css">
.menu {
width: 694px;
height: 50px;
/*设置元素⽔平居中*/
margin: 50px auto 0;
/*去除内联元素间隙*/
font-size: 0;
/*去掉ul⾃带的.格式*/
list-style: none;
padding: 0;
}
.menu li{
/*将元素转换为⾏内块元素*/
display:inline-block;
width:98px;
height:48px;
border:1px solid gold;
font-size:16px;
/*将边框合并*/
margin-right:-1px;
text-align:center;
line-height:48px;
}
.menu a{
font-family: "Microsoft YaHei UI";
color:pink;
/
*去掉a元素的下划线*/
text-decoration: none;
}
/*⿏标位于元素位置时改变元素样式*/
.menu li:hover{
background-color: orange;
}
.menu a:hover{
color:#fff;
}
</style>
</head>
<body>
<ul class="menu">
<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>菜单栏包括
</body>
</html>
效果图：