滑动门原理
Posted ericblog1992
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滑动门原理相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动门原理</title>
<style type="text/css">
/*1 a 是 设置左侧背景 (左门)*/
a {
/*4 因为是滑动门,左右推拉， 跟文字多少有关系，此时需要用文字 撑开盒子，就要用到行内块*/
display: inline-block;
height: 33px;
background: url(css高级/images/to.png) no-repeat;
margin:100px;
padding-left: 15px;
color: #fff;
}
/*2 span 是设置右侧背景 (右门) */
a span {
display: inline-block;
height: 33px;
/* 一定要注意 span 需要背景图片 右对齐 */
background: url(css高级/images/to.png) no-repeat right top;
padding-right: 15px;
line-height: 33px;
text-align: center;
}
/*3 因为整个导航栏都是链接 所以 a 要包含 span*/
</style>
</head>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>公司新闻公司新闻新</span>
</a>
</body>
</html>
以上是关于滑动门原理的主要内容，如果未能解决你的问题，请参考以下文章