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

精灵技术——雪碧技术 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" 不显示滚动条