为了使各种特殊形状的背景能够自适应元素内容的多少,出现了css滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动。以适应元素内部的文本内容,可用性更强。最常用于各种导航栏的滑动门。
核心技术是利用css精灵技术(背景位置)和盒子padding撑开宽度。以便适应不同字数的导航栏。
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
其中存在三个特别注意的地方:
(一)a标签中设置背景的左侧,padding撑开合适宽度。
(二)span标签设置背景的右侧,padding撑开合适的宽度,剩下的文字继续撑开宽度。
(三)之所以a包含着span就是因为整个导航栏都是可以点击的。
下面就以一个简单的小例子来说明一下
<a href="#">
<span>首页</span>
</a>
a {
margin: 100px;
display: inline-block;
height: 33px;
/* 千万不能给宽度 写死宽度是不对滴,我们要推拉门 自由缩放*/
background: url(images/ao.png) no-repeat;
padding-left: 15px;
color: #fff;
text-decoration: none;
line-height: 33px;
}
a span {
display: inline-block;
height: 33px;
background: url(images/ao.png) no-repeat right;
/* span 不能给宽度 利用padding挤开 要我要span 右边的圆角 所以 背景位置 右对齐 */
padding-right: 15px;
}
在执行上面的代码后会发现,在没有文字的时候也只是一个width30px的盒子而已,当添加进去了文字之后,盒子会随着字数而自己扩张。
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}