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 阅读(380) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS（十）：案例2-小米侧边栏

· CSS（十五）：盒子模型案例

· CSS3-动画高级教程-全-

· 制作导航栏并用CSS美化

· 12-2`100 css五彩导航

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？

公告

昵称： pure3417
园龄： 3年11个月
粉丝： 31
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

pure3417

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

公告

搜索

积分与排名

随笔分类 (150)

个人blog网址

阅读排行榜

	<!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>