代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
display: inline-block;/* 设置为行内块元素，使其列为一排*/
text-decoration: none;/* 无文本修饰 */
width: 120px;
height: 58px;
text-align: center;/* 文本水平居中 */
line-height: 50px;/* 单行文本垂直居中 */
color: aqua;
}
.one{
background-image: url(../image/bg5.png);
}
.two{
background-image: url(../image/bg6.png);
}
.three{
background-image: url(../image/bg7.png);
position: relative;
}
.three img{
display: none;/* 隐藏元素 */
position: absolute;
bottom: -138px;/* 图片底部到父元素顶部的距离 */
}
.four{
background-image: url(../image/bg8.png);
}
.one:hover{
background-image: url(../image/bg1.png);
color: white;/* 当鼠标移动到该元素时，文字变为白色 */
}
.two:hover{
background-image: url(../image/bg2.png);
color: white;
}
.three:hover{
background-image: url(../image/bg3.png);
color: white;
}
.three:hover img{
display: block;/* 设置为块元素，当鼠标移到父元素时就会显示 */
}
.four:hover{
background-image: url(../image/bg4.png);
color: white;
}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航
<img src="C:\Users\86183\Desktop\web素材\images\code.jpg"><!-- 图片为子元素 -->
</a>
<a href="#" class="four">五彩导航</a>
</body>
</html>
代码图片：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
