滑动门
概述：
css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容
实例预览
实现要点
滑动门核心技术就是利用背景属性（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
滑动门实现：
a span
a用来撑开左边的小括号
span用来撑开右边的小括号
给a设置padding-left: 让文字距离左边有点距离，美观
给span设置padding-right 让文字距离右边有点距离，美观
实际文字写在span里面，span的宽度由文字和内边距撑开
a的宽度是由span撑开了
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
.wrap {
height: 74px;
background: url(../img/css滑动.jpg) repeat-x;
}
.wrapul {
height: 74px;
line-height: 74px;
padding-left: 200px;
box-sizing: border-box;
}
.wrapulli {
float: left;
margin-right: 20px;
}
/* a用来撑开左边的小括号 */
.wrapullia {
height: 33px;
line-height: 33px;
display: inline-block;
background: url(../img/hua.png) no-repeat0%0%;
padding-left: 15px;
}
/* span用来撑开右边的小括号 */
.wrapullispan {
height: 33px;
line-height: 33px;
display: inline-block;
background: url(../img/hua.png) no-repeat100%100%;
padding-right: 15px;
}
.wrapulli:hovera {
/* background: url(../img/hua.png) no-repeat 0% 0%; */
}
.wrapulli:hoverspan {
/* background: url(../img/hua.png) no-repeat 100% 100%; */
}
</style>
</head>
<body>
<divclass="wrap">
<ul>
<!-- 实际文字写在span里面，
span的宽度由文字和内边距撑开
a的宽度是由span撑开了 -->
<li>
<!-- a用来撑开左边的小括号 -->
<ahref="#">
<!-- span用来撑开右边的小括号 -->
<span>首页</span>
</a>
</li>
<li>
<ahref="#"><span>帮助与反馈</span></a>
</li>
<li>
<ahref="#"><span>公众与平台</span></a>
</li>
<li>
<ahref="#"><span>开发平台</span></a>
</li>
<li>
<ahref="#"><span>微信支付</span></a>
</li>
</ul>
</div>
</body>
</html>
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
