知识点：
width:宽度120px
height：高度50px
.nav{}:类
text-align:文本对齐方式
background-image:url（）：背景图片
display: inline-block：行内块（点击?块级元素和行内元素-前端CSS基础）
line-height:行高
.nav :hover{background-image: url(images/images/bg7.png);}：鼠标移动到链接上显示效果
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>14</title>
<style>
.nav {
text-align: center; /*文本居中，单纯的居中只会让部分文字居中，这里需要整体居中，采取类居中*/
}
.nav a1{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg1.png);/*图片存放地址配置要对应*/
display: inline-block;
line-height: 50px;
}
.nav a2{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg2.png);
display: inline-block;
line-height: 50px;
}
.nav a3{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg3.png);
display: inline-block;
line-height: 50px;
}
.nav a4{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg4.png);
display: inline-block;
line-height: 50px;
}
.nav a5{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg5.png);
display: inline-block;
line-height: 50px;
}
.nav :hover{
background-image: url(images/images/bg7.png);
}
</style>
</head>
<body>
<div class="nav">
<a1 href="#">网站首页</a1>
<a2 href="#">网站首页</a2>
<a3 href="#">网站首页</a3>
<a4 href="#">网站首页</a4>
<a5 href="#">网站首页</a5>
</div>
</body>
</html>
整体效果：
每天学点新知识，总有一天我们都会“学富五车”！
初出茅庐，如有不严谨之处敬请指正
图文来源:网络编辑加工处理网络图文视频版权归原作者所有，如有侵权请您告知@！
点击了解更多获取源码及素材
提取码：C818