HTML/CSS编写五彩导航
作者：互联网
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五彩导航</title>
<style type="text/css">
.nav .one:link{
display: inline-block;
width:120px;
height:58px;
background:url("bg1.png");
text-decoration: none;
text-align: center;
line-height:50px;
}
.nav .one:hover{
background: url("bg5.png");
}
.nav .two:link{
display: inline-block;
width:120px;
height:58px;
background:url("bg2.png");
text-decoration: none;
text-align: center;
line-height: 50px;
}
.nav .two:hover{
background:url("bg4.png");
}
.nav .three:link{
display: inline-block;
width:120px;
height: 58px;
background:url("bg3.png");
text-decoration: none;
text-align: center;
line-height: 50px;
}
.nav .three:hover{
background:url("bg6.png");
}
.nav .four:link{
display:inline-block;
width: 120px;
height: 58px;
text-align:center;
text-decoration: none;
background:url("bg4.png");
line-height: 50px;
}
.nav .four:hover{
background:url("bg7.png");
}
</style>
</head>
<body>
<div class="nav" >
<a href="#" class="one" style="color:green">五彩导航</a>
<a href="#" class="two" style="color:black">五彩导航</a>
<a href="#" class="three" style="color:yellow;">五彩导航</a>
<a href="#" class="four" style="color:white;">五彩导航</a>
</div>
</body>
</html>
结果如图：
（该代码鼠标移动到图标时会变为其他颜色）
标签：url,text,height,HTML,nav,png,background,五彩,CSS 来源： https://blog.csdn.net/m0_58822480/article/details/117752510