CSS（十二）：案例3-五彩导航栏

实现下面效果

当鼠标经过链接时 背景图片会发生改变

  • 核心思路

    • 链接属于行内元素，但是此时需要设置宽高，因此需要模式转换
    • 里面的文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码
    • 链接里面需要设置背景图片，因此需要用到背景的相关属性
    • 鼠标经过变化背景图片，因此需要用到链接伪类选择器

  • 代码

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>五彩导航栏</title>
		<style>
			.nav a {
				display: inline-block;
				width: 120px;
				height: 58px;
				background-color: purple;
				text-align: center;
				line-height: 48px;
				color: #fff;
				text-decoration: none;
			}
			
			.nav .bg1 {
				background: url(images/bg1.png) no-repeat;
			}
			
			.nav .bg2 {
				background: url(images/bg2.png) no-repeat;
			}
			
			.nav .bg3 {
				background: url(images/bg3.png) no-repeat;
			}
			
			.nav .bg4 {
				background: url(images/bg4.png) no-repeat;
			}
			
			.nav .bg5 {
				background: url(images/bg5.png) no-repeat;
			}
			
			.nav .bg1:hover,
			.nav .bg5:hover {
				background-image: url(images/bg11.png);
			}
			
			.nav .bg2:hover,
			.nav .bg3:hover,
			.nav .bg4:hover {
				background-image: url(images/bg22.png);
			}
			
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#" class="bg1">五彩导航</a>
			<a href="#" class="bg2">五彩导航</a>
			<a href="#" class="bg3">五彩导航</a>
			<a href="#" class="bg4">五彩导航</a>
			<a href="#" class="bg5">五彩导航</a>
		</div>
	</body>
</html>
posted @ 2022-06-10 16:15  pure3417  阅读(363)  评论(0)  编辑  收藏  举报