另辟蹊径解决滑动门的自适应问题

为了更好的理解本文,你需要阅读前确保了解了以下内容

什么是滑动门？

滑动门的原理是什么？

参考阅读：
         《CSS中的滑动门技术》 
         《100%点击区的滑动门 》
        
现存的滑动门宽度自适应的主要原理是什么？这个方案的最大问题是什么？

作者简要回答：

1.       滑动门

在CSS中，一个经常被人们讨论的先进技术就是背景图片的层叠,并允许他们在彼此之上进行滑动,以创造一种特殊效果(圆角)，这就是滑动门。

2.       滑动门的原理

滑动门的原理的主要原理就是图片的层叠，看代码会更容易明白

 

 1 HTML方面:
 2 <ul>
 3       <li><a href="#">滑动门一</a></li>
 4 
 5       <li id="current"><a href="#">滑动门二</a></li>
 6 
 7       <li><a href="#">滑动门三</a></li>
 8 
 9       <li><a href="#">滑动门四</a></li>
10 
11       <li><a href="#">滑动门五</a></li>
12 
13 </ul>
14 
15 CSS:
16 
17 Li { background:url(i/nav_bg_left.jpg) left top no-repeat;}
18 
19 Li a{ background:url(i/nav_bg_right.jpg) left top no-repeat; }
20 
21 注：只列出主要代码,详细内容不在本文讨论范围之内,请自寻查找资料 。
22 

 

3.       现存的滑动门宽度自适应的主要原理是什么？

用三层背景图片叠加,中间的图片repeat-x以达到宽度自适应。

代码上是添加无语义标签<span>：

 <ul>
2       <li><a href="#"><span>滑动门一</span></a></li>
3       <li id="current"><a href="#"><span>滑动门二</span></a></li>
4       <li><a href="#"><span>滑动门三</span></a></li>
5       <li><a href="#"><span>滑动门四</span></a></li>
6       <li><a href="#"><span>滑动门五</span></a></li>
7 </ul>
8 

这篇文章就是解决问题三的,废话少说上我自己的代码：

 1 Html:
 2 <div class="jquery_info_title">
 3        <h3><span>客户列表</span></h3>
 4   </div>
 5 Css:
 6 .jquery_info_title h3 {
 7     background:url(i/jquery_bg_01.jpg) left top no-repeat ;
 8     height:28px;
 9     padding-left:30px;  /* 留出30px内边距以显示jquery_bg_01.jpg上的图标 */
10 }
11 .jquery_info_title h3 span { background:url(i/jquery_bg_02.jpg) right top no-repeat;
12     height:28px;
13     line-height:28px;
14     color:#FFF;
15     display:block;      /* span 是内联元素，加block以转化成块级元素*/
16     }
17 

爆料：jquery_bg_01.jpg 图片的宽度是927px，jquery_bg_02.jpg图片的宽度是882px

那么这个滑动门的适应范围达到1809px(如果你的显示器分辨率宽度超过1809，你可以PS修改jquery_bg_02.jpg的宽度，以解决过宽文字没有背景图片的问题)

总结：这种解决方案不添加无语义标签，只利用图片，更多是用在标题的圆角条上，导航上的应用，没做实验。
   jquery_bg_01.jpg：
   
   jquery_bg_02.jpg：

最后效果：