这篇文章上次修改于 2083 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

精灵技术——雪碧技术 css sprites

把一堆小图片整合到一张大图上，通过背景图定位精确显示图片，减少服务器对图片的请求数量
优点：
    1）减少网页的HTTP请求，提高页面的性能
    2）减少图片命名的困扰
    3）更换风格方便
缺点：
    1）必须要限定容器的大小符合背景图片元素位置，需要计算
    2）维护的时候比较麻烦

步骤：

    1）制作一张具有多种状态的拼合图片，图片最好有一定规律
    2）给要显示背景的盒子一个固定的尺寸（width和height），以背景图的形式加载（background: url() no-repeat 0 0;），让其局部显示
    3）通过背景图定位（background-position）控制不同的显示状态

/鼠标样式：/

        cursor: pointer;  /*鼠标指针形状为手型*/
        cursor: wait;  /*鼠标指针指示程序正忙*/
        cursor: help;  /*鼠标指针指示可用的帮助*/
        cursor: text;  /*鼠标指针指示文本*/
        cursor: move;  /*鼠标指针指示对象是可移动*/
        cursor: crosshair;  /*鼠标指针呈现为十字形*/
        cursor: auto;  /* 默认值，浏览器设置的光标*/
        cursor: default;  /* 默认光标*/

<!--锚点链接：

1、下锚——定义锚点，跳转的目的地
    <a name="锚点名"></a>

2、锚点链接

    <a href="#锚点名">链接文字</a>

-->

<div class="btn">
    <a href="#re">red</a>
    <a href="#or">orange</a>
    <a href="#to">tomato</a>
    <a href="#ye">yellow</a>
    <a href="#pi">pink</a>
</div>
<a name="re"></a>
<div class="wrap red"></div>

<a name="or"></a>
<div class="wrap orange"></div>
<a name="to"></a>
<div class="wrap tomato">
</div>
<a name="ye"></a>
<div class="wrap yellow"></div>

<a name="pi"></a>
<div class="wrap pink">

</div>

<!--锚点链接：

1、下锚——定义锚点，跳转的目的地
    <a name="锚点名"></a>
    <标签名 id="锚点名"></标签名>

2、锚点链接

    <a href="#锚点名">链接文字</a>
    <a href="demo1.html#box1">链接文字</a>  跳转至demo1.html页面的锚点位置

<div class="btn">
<a href="#r">red</a>
<a href="#o">orange</a>
<a href="#t">tomato</a>
<a href="#y">yellow</a>
<a href="#p">pink</a>
<a href="demo1.html#box1">demo1.html box1</a>
</div>
<div id="r" class="wrap red"></div>
<div id="o" class="wrap orange"></div>
<div id="t" class="wrap tomato"></div>
<div id="y" class="wrap yellow"></div>
<div id="p" class="wrap pink"></div>

iframe内联框架：<br/>
<iframe src="http://www.baidu.com" width="1000" height="500" frameborder="0" scrolling="no"></iframe>
    src属性：链接地址
    frameborder属性：设置iframe的边框
        frameborder="0" 不显示边框
        frameborder="1" 显示四周边框
    scrolling属性：在iframe框中是否显示滚动条
        scrolling="yes"显示滚动条
        scrolling="no" 不显示滚动条