09 背景导航栏案例

最新推荐文章于 2024-10-30 20:01:39 发布

小鱼儿爱喝酒

最新推荐文章于 2024-10-30 20:01:39 发布

阅读量347

点赞数

分类专栏： WEB前端学习文章标签： html5

本文链接：https://blog.csdn.net/dskfksdf/article/details/117526211

版权

WEB前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>英雄联盟背景</title>
		<style type="text/css">
			.nav a {
				display: inline-block;
				text-decoration: none;
				width: 100px;
				height: 42px;
				background-color: antiquewhite;
				color: black;
				text-align: center;
				line-height: 50px;
			}
			.bg1 {
				background-image: url(../image/five1.png);
				background-repeat: no-repeat;
			}
			.nav .bg1:hover {background-image: url(../image/five2.png);}
			.bg2 {
				background-image: url(../image/five2.png);
				background-repeat: no-repeat;
			}
			.nav .bg2:hover {background-image: url(../image/five3.png);}
			.bg3 {
				background-image: url(../image/five3.png);
				background-repeat: no-repeat;
			}
			.nav .bg3:hover {background-image: url(../image/five4.png);}
			.bg4 {
				background-image: url(../image/five4.png);
				background-repeat: no-repeat;
			}
			.nav .bg4:hover {background-image: url(../image/five5.png);}
			.bg5 {
				background-image: url(../image/five5.png);
				background-repeat: no-repeat;
			}
			.nav .bg5:hover {background-image: url(../image/five1.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>

展示效果：

完全无操作时：