前端笔记记录----简单导航栏续（背景图片练习）

最新推荐文章于 2021-06-04 23:58:08 发布

兰兰的风。。。

最新推荐文章于 2021-06-04 23:58:08 发布

阅读量238

点赞数

分类专栏： # html # css 文章标签： html css

本文链接：https://blog.csdn.net/pilgrim_121/article/details/110916008

版权

css 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

8 篇文章 1 订阅

订阅专栏

声明：以下内容为个人学习总结，可能有理解有误或记录错误之处，初衷是方便自己学习复习记录。

实现效果

点击前：
在这里插入图片描述
点击后：

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

    <style>
    	.nav {
    		text-align: center;
    	}
        .nav a {
        	display: inline-block;
        	width: 200px;
        	height: 50px;
        	line-height: 50px;
        	text-decoration: none;
        	color: white;
        	/*background-color: pink;*/
        	background: url(imgs/h.png) no-repeat;
        }
        .nav a:hover {
            background-image: url(imgs/l.png);
        }
    </style>

</head>
<body>

	<div class="nav">
		<a href="#">首页</a>
		<a href="#">前端</a>
		<a href="#">后端</a>
		<a href="#">工具使用</a>
		<a href="#">关于我</a>
	</div>
	
</body>
</html>

背景图片：
链接：https://pan.baidu.com/s/1I5InT8UDWvix9LGiDtnuFA
提取码：j5q7
复制这段内容后打开百度网盘手机App，操作更方便哦

兰兰的风。。。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端笔记记录----简单导航栏续（背景图片练习）

实现效果点击前：点击后：实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav {
复制链接

扫一扫