【Web】CSS（No.30）精灵图经典案例（一）《微信滑动门》

最新推荐文章于 2022-03-08 15:17:05 发布

Sherry Lupus

最新推荐文章于 2022-03-08 15:17:05 发布

阅读量369

点赞数 1

分类专栏： Web-Css 文章标签： Web Css

本文链接：https://blog.csdn.net/qq_43251850/article/details/91492419

版权

Web-Css 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

需要素材点击图片联系我或私信、评论

效果图：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信滑动门</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.header{
			width: 100%;
			height: 75px;
			background: url(images/wx.jpg) repeat-x;
		}
		.header ul li{
			list-style: none;
			float: left;
			height: 33px;
			margin: 21px 20px;

		}
		.header ul li a{
			color: white;
			text-decoration: none;
			font-size: 14px;
			height: 33px;
			display: block;
			background: url(images/to.png) no-repeat;
			padding-left: 15px;

		}
		.header ul li a span{
			line-height: 33px;
			display: block;
			height: 33px;
			background: url(images/to.png) no-repeat right;
			padding-right: 15px;
		}
		.header ul li a:hover{
			background-image: url(images/ao.png);
		}
		.header ul li a:hover span{
			background-image: url(images/ao.png);
		}
	</style>
</head>
<body>

	<div class="header">
		<ul>
			<li><a href="#"><span>首页</span></a></li>
			<li><a href="#"><span>帮助与反馈</span></a></li>
			<li><a href="#"><span>公众平台</span></a></li>
			<li><a href="#"><span>开放</span></a></li>
			<li><a href="#"><span>嘻嘻</span></a></li>
		</ul>
	</div>
</body>
</html>