CSS 五彩导航

最新推荐文章于 2024-03-14 12:40:51 发布

小白小陌离

最新推荐文章于 2024-03-14 12:40:51 发布

阅读量438

点赞数

分类专栏： web 文章标签： html

本文链接：https://blog.csdn.net/weixin_49217619/article/details/117471293

版权

预计实现效果

鼠标放至某一块上时，变换为另一种颜色

思路：

1.五个a 标签实现，把a标签转换为行内块模式

2.使用a:hover 伪类选择器

3.对盒子进行原始背景定义

4.使用line-height < height 实现文字垂直居中在图片中央（视觉上）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五彩导航</title>
	<style type="text/css">
		.nav a{
			display: inline-block;
			text-align: center;
			text-decoration: none;
			width: 120px;
			height: 57px;
			line-height: 50px;
			color: #FFFFFF;
		}
		.nav .one {
			background-image: url(bg1.png);
		}
		.nav .two {
			background-image: url(bg2.png);
		}
		.nav .three {
			background-image: url(bg3.png);
		}
		.nav .four {
			b

最低0.47元/天解锁文章

小白小陌离

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 五彩导航

预计实现效果鼠标放至某一块上时，变换为另一种颜色思路：1.五个a 标签实现，把a标签转换为行内块模式2.使用a:hover 伪类选择器3.对盒子进行原始背景定义4.使用line-height < height 实现文字垂直居中在图片中央（视觉上）代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五彩导航
复制链接

扫一扫