另辟蹊径解决滑动门的自适应问题
2009-08-16 11:56 一醉而过 阅读(543) 评论(2) 编辑 收藏 举报为了更好的理解本文,你需要阅读前确保了解了以下内容
什么是滑动门?
滑动门的原理是什么?
参考阅读:
《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
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>:
1 <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
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
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:
最后效果: