前端学习之滑动门/移动门效果(背景图需根据内容的长度自动增长)

最新推荐文章于 2024-01-28 21:00:14 发布

Endless Daydream233

最新推荐文章于 2024-01-28 21:00:14 发布

阅读量576

点赞数

分类专栏：前端学习基础记录文章标签： css

本文链接：https://blog.csdn.net/gua222/article/details/107045502

版权

前端学习基础记录专栏收录该内容

57 篇文章 7 订阅

订阅专栏

制作网页的时候，为了美观，往往要为网页元素设置特殊形状的背景，比如微信官网的导航栏。最大的问题是，导航菜单栏里面的字数不一样，即背景图需根据内容的长度自动增长，这样就需要用到滑动门的效果。

原理：使用一个a标签，包裹一个span标签。给a标签一个左侧的背景位置，给span标签一个背景右侧的位置。这样两者重合，就会出来滑动门的效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	a{
		margin: 300px;
		display: inline-block;
		height: 33px;
		background:url("img/sprite/to.png") no-repeat;
		line-height: 33px;
		text-decoration: none;
		color: #fff;
		font-size: 14px;
		padding-left: 15px;
	}
	span{
		display: inline-block;
		height: 33px;
		background:url("img/sprite/to.png") no-repeat right;
		padding-right: 15px;
	}
	</style>
</head>
<body>
	<a href="#"><span>首页</span></a>
</body>
</html>