精灵图，滑动门

一.精灵图

1.原理：将页面的背景图拼合到一张图片中，利用背景属性，使不同元素显示不同的图片部分

2.实现步骤：

        图片拼合

        限定容器的打消（根据要显示图标的的大小）

        背景图定位

3.优点：

        减少http请求，从而大大提高页面的性能

        减少图片命名困扰

        更换风格方便

4.缺点：

        必须要限定容器的大小

        需要计算位置

5.使用场景：一般适用于小图片（小图标，小背景），不适合大背景的布局

二.滑动门

1.步骤：

        导航栏用无序列表<ul> <li>

                <li> <a href="#">文字</a></li>

        将<li>当作滑动门左半扇，<a>当作滑动门右半扇

 

        给<li>高度，图片的高度，背景图引入滑动门。padding-left让文字与左边有空隙

        给<a>高度，但将<a>转换为块级元素,原理同上

        <li>:hover{背景图 position ; top;left;}

        <li>:hover a{背景图 position:; bottom;right;}