css滑动门原理

最新推荐文章于 2023-04-17 22:18:39 发布

M-Y

最新推荐文章于 2023-04-17 22:18:39 发布

阅读量1.2k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_40784851/article/details/82699448

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css滑动门原理

a设置背景左侧，padding撑开合适宽度。

span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度
之所以a包含span就是因为整个导航栏都是可以点击的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动门</title>
	<style type="text/css">
		* {
			margin:0px;
			padding:0px;
		}
		a {
			margin: 100px;			
			display: inline-block;
			background:url(lTcb_ve.png) no-repeat;
			height: 33px;			
			line-height:33px;
			padding-left: 15px;	
			color:#fff;
			text-decoration: none;			
		}
		a span {
			/*行内元素没有宽高 需要加block 或者 inline-block*/
			display:inline-block;
			height: 33px；
			background:url(lTcb_ve.png) no-repeat right;	
			padding-right: 15px;	
			
		}
	</style>
</head>
<body>
	<a href="#">
		<span>这就是css的滑动门到底可以写到少个文字呢让我们试一试文字超出了就好这个样子哦</span>
	</a>
</body>
</html>

背景图片(span能写多少字取决于你的背景图片的宽度)