前端开发工程师-HTML5+CSS3-4
精灵技术——雪碧技术 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" 不显示滚动条
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭