<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五彩导航</title>
<style>
div a {
width: 120px;
height: 88px;
display: inline-block;
text-decoration: none;
color: #fff;
background-color: pink;
line-height: 68px;
text-align: center;
}
.biaozhu1 {
background: url(../images2/标注1.png) no-repeat center center
}
.biaozhu1:hover {
background-image: url(../images2/标注5.png);
}
.biaozhu2 {
background: url(../images2/标注2.png) no-repeat center center
}
.biaozhu2:hover {
background-image: url(../images2/标注4.png);
}
.biaozhu3 {
background: url(../images2/标注3.png) no-repeat center center
}
.biaozhu3:hover {
background-image: url(../images2/标注6.png);
}
.biaozhu4 {
background: url(../images2/标注4.png) no-repeat center center
}
.biaozhu4:hover {
background-image: url(../images2/标注2.png);
}
.biaozhu5 {
background: url(../images2/标注5.png) no-repeat center center
}
.biaozhu5:hover {
background-image: url(../images2/标注1.png);
}
</style>
</head>
<body>
<div>
<a href="#" class="biaozhu1">五彩导航</a>
<a href="#" class="biaozhu2">五彩导航</a>
<a href="#" class="biaozhu3">五彩导航</a>
<a href="#" class="biaozhu4">五彩导航</a>
<a href="#" class="biaozhu5">五彩导航</a>
</div>
</body>
</html>
评论0