<!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>
