五彩导航栏

最新推荐文章于 2024-04-15 23:15:54 发布

A 神

最新推荐文章于 2024-04-15 23:15:54 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css导航栏

本文链接：https://blog.csdn.net/weixin_42378409/article/details/103296694

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>aaaa</title>
<style>
		a{
	width:120px;
	height:58px;
	display:inline-block;
	text-align:center;
	line-height:50px;
	color:white;
	text-decoration:none;
	}
.one{
	background:url(images/bg1.png);}
.two{
	background:url(images/bg2.png);}
.three{
	background:url(images/bg3.png);}
.four{
	background:url(images/bg4.png);}
.one:hover{
	background:url(images/bg5.png);}
.two:hover{
	background:url(images/bg6.png);}
	.three:hover{
	background:url(images/bg5.png);}
.four:hover{
	background:url(images/bg6.png);}
</style>
	
</head>

<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
<a href="#" class="five">五彩导航</a>
	
</body>
</html>

在这里插入图片描述