23.复杂滑动门的效果

最新推荐文章于 2021-06-10 00:16:26 发布

neilro

最新推荐文章于 2021-06-10 00:16:26 发布

阅读量234

点赞数

分类专栏： Div+Css 文章标签：滑动门

本文链接：https://blog.csdn.net/neilro/article/details/79248528

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

效果图：

注：把鼠标移动到按钮上会变成蓝色。

素材：

难点：

①.文字的长短决定了图片的长短。

②.该按钮由两张图片组成，但一个标签不能包含两个图片，如何解决？

（答：在a标签里嵌套一个span标签，a标签调用一张图片，span标签调用另外一张图片）

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>复杂滑动门</title>
	<style type="text/css">
		/*CSS初始化*/
		body,ul,li{
			margin:0;
			padding:0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		/*CSS初始化结束*/
		.box ul li{
			height:35px;
			float: left;
		}
		.box ul li a{
			display:inline-block;
			line-height: 35px;
			background:url("images/bg_r1_c1.png") no-repeat;
			padding-left:7px;
			
		}
		.box ul li span{
			/*转行内块*/
			display:inline-block;
			height:35px;
			background:url("images/bg_r1_c2.png") right;
			padding-right:25px;
			color:white;
		}
		.box ul li a:hover{
			background:url("images/blue_r1_c1.png") no-repeat;
		}
		.box ul li a span:hover{
			background:url("images/blue_r1_c2.png") right;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<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>

neilro

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
23.复杂滑动门的效果

效果图：注：把鼠标移动到按钮上会变成蓝色。素材：难点： ①.文字的长短决定了图片的长短。 ②.该按钮由两张图片组成，但一个标签不能包含两个图片，如何解决？（答：在a标签里嵌套一个span标签，a标签调用一张图片，span标签调用另外一张图片）代码：复杂滑动门 /*CSS初始化*/ body,ul,li{
复制链接

扫一扫