滑动门的原理-CSDN博客

　　滑动门听上去很专业很难理解，我在明白它的原理前也是一看到就头晕，能避则避，但是有一天在csdn上看到一篇介绍滑动门的文章，看完后豁然开朗，下面就文章的内容结合自己的理解来阐述一下滑动门的原理。

代码

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > CODE.JS.CN </ title >
5 < style >
6 body { font : 12px Arial, Helvetica, sans-serif ; }
7 #menu ul { margin : 0px ; padding : 0px ; list-style : none ; }
8 #menu li { float : left ; }
9 #menu a { display : block ; padding-left : 4px ; background : url(2072.gif) no-repeat left top ; }
10 #menu span { background : url(2073.gif) no-repeat right top ; padding : 10px 20px 10px 16px ; display : block ; }
11 #menu a:hover { background : url(2072.gif) no-repeat left -42px ; color : #fff ; }
12 #menu a:hover span { background : url(2073.gif) no-repeat right -42px ; }
13 </ style >
14 </ head >
15 < body >
16 < div id ="menu" >
17      < ul >
18       < li >< a href ="#" >< span > Home </ span ></ a ></ li >
19       < li >< a href ="#" >< span > News </ span ></ a ></ li >
20       < li >< a href ="#" >< span > Downloads </ span ></ a ></ li >
21       < li >< a href ="#" >< span > Services </ span ></ a ></ li >
22       < li >< a href ="#" >< span > Support </ span ></ a ></ li >
23       < li >< a href ="#" >< span > About </ span ></ a ></ li >
24      </ ul >
25 </ div >
26 </ body >
27 </ html >
28
29

ul: 有默认值，所以要格式化一下：margin:0px;padding:0px;list-style:none；

li: 默认是纵向排列，在手册上查不到li的默认设置，但我觉得li应该是个块元素。所以要设置float:left，使之横向排列；

a: 是行内元素，对a设置宽度、高度是无效，所以要把a元素先设置成块级元素：display:block；设置背景为2072.gif，从左上开始显示：background:url(2072.gif) no-repeat left top；设置padding-left：4px，这4个像素是2072.gif图片的宽度，这是为了让a元素内的span元素在a元素里距离左边4个像素后开始显示，这个就是滑动门原理的一个重要步骤；