css滑动门技术

css滑动门技术

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了css滑动门技术。
使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
最常见于各种导航栏的滑动门。
工作原理
滑动门技术的关键主要在于图片拼接，
利用CSS精灵Sprite（主要是背景位置position）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
原背景图–> 切开左边 --> 剩下的右边随着文字的增多从左往右滑动(这也是文字增长的方向)

案例
css内容
*{margin: 0;padding: 0;list-style: none;}
.all{
width: 500px;
margin: 20px auto;
height: 35px;
line-height: 35px;
}
.all li{float: left;}
.all a,.all span{
display:block;
height: 35px;
float: left;
}
.one{
width: 7px;
background: url(…/img/hd_left.png);
}
.two{
width: 25px;
background: url(…/img/hd_right.png);
}
.all a:link,.all a:visited{
color: #fff;
font: 12px “新宋体”;
text-align: center;
line-height: 35px;
text-decoration: none;
background: url(…/img/hd_middle.png) repeat-x;
padding: 0 5px;
}

html内容
< body>
< ul class=“all”>
< li>
< span class=“one”>< /span>< a href="#">首页< /a>< span class=“two”>< /span>
< /li>
< li>
< span class=“one”>< /span>< a href="#">传智播客< /a>< span class=“two”>< /span>
< /li>
< li>
< span class=“one”>< /span>< a href="#">就业指导信息< /a>< span class=“two”>< /span>
< /li>
< li>
< span class=“one”>< /span>< a href="#">留言本< /a>< span class=“two”>< /span>
< /li>
< li>
< span class=“one”>< /span>< a href="#">添加友情链接< /a>< span class=“two”></ span>
< /li>
< /ul>
< /body>