滑动门css精灵、圆角及其扩展笔记

1.      滑动门：

a)        三层嵌套是利用中间的平铺元素进行内容伸缩的，而两边是各加一个背景；两层嵌套是利用背景图左边本身的最大宽度来对按钮进行伸缩的，然后在其右边加一个背景。

b)        三层嵌套是针对于扩展要求高的，图片比较大的滑动门；

c)        两层嵌套是针对于扩展要求低的，图片比较小的滑动门。

2.      元素的宽度由内容撑开：

a)        display:inline;（不支持设置高度）

b)        display:inline-block;（在IE6，7下不支持块标签）

c)        float

d)        position:absolute;（还要设置top，left等值，麻烦）

e)        position:fixed;（不兼容）

3.      “border-radius:[number]px;”这条命令表示边框的角的半径为【number】像素。

4.      <divclass="box">

<divclass="boxHead">

           <divclass="boxHL">

        <divclass="boxHR"></div>

    </div>

</div>

 <divclass="boxMiddle"></div>

 <divclass="boxFoot">

    <div class="boxFL">

        <divclass="boxFR"></div>

    </div>

</div>

</div>

此方法是分别先在头部和尾部进行一个可扩展的三层嵌套圆角，再将中间内容块加入两条边框。此方法解决了圆角样式——“border-radius:[number]px;”在IE6下不兼容的问题。

5.      <divclass="box">

<divclass="boxL">

<divclass="boxR"></div>

</div>   

</div>

此种方法是先让中间的内容块平铺，接着在先后在左右两边加两个圆角。此种方法虽然能实现，但是比较麻烦，需要定位，并且总宽度会比原来设定时宽出两个圆角的宽度。

6.      <divclass="boxL">

<divclass="boxR">

             <divclass="box"></div>

    </div>

</div>

此种方法是先设定背景的总宽度，接着在分别在左右两角加上透明圆角，再在中间平铺内容块的背景，最后用margin将左右透明圆角的宽度空出。

7.      background-position:[number-x]px[number-y]px;表示元素的起始位置先在x轴上移动number个像素，接着再在y轴上移动number个像素。

8.      CSSSprites也叫做CSS精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，并且访问服务器的次数也会相应降低。

9.      CSSSprites（CSS精灵）的优点：

a)        利用CSS Sprites能很好地减少网页的http请求次数，从而大大的提升了页面的性能；

b)        同时也可以减少图片的大小。

10.  CSSSprites（CSS精灵）的缺点：

a)        降低了开发效率（需要合成一张大图）；

b)        维护难度加大（要改一张图片时，就需要重新合成大图）。