css基础知识5（锚点及图像整合）

定位锚点

1.元素的定位设置

position属性：定义建立元素布局所用的定位机制
语法：{position:static/absolute/relative/fixed;}
说明：1）static 默认值。没有定位，元素出现在正常的流中(忽略top，bottom，leftright或者z-index声明）。
2）absolute:生成绝对定位的元素，相当于static定位以外的第一个父元素进行定位。元素的位置通过"left",“top”,“right"以及"bottom"属性进行规定。
3）relative：生成相对定位的元素，相当于其正常位置进行定位。
4）fixed：生成绝对定位的元素，相当于浏览器窗口进行定位。元素的位置通过"left”,“top”,"right"以及"bottom"属性进行规定。

z-index属性：检索或设置对象的层叠顺序
此属性仅仅作用于position属性值为relative或absolute的对象
语法：{z-index:auto/number;}
说明：1）auto：默认值，遵从其父对象
2）number：无单位的整数值，可以为负数
较大number值的对象会覆盖在较小number值的对象上。如两个绝对定位对象的此属性具有同样的number值，那么将根据它们在HTML文档中声明的顺序层叠

锚点链接

锚点链接是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

1.设置锚点链接的方法：

1）给元素定义命名锚记名
语法：<标记 id=“命名锚记名”>
2)命名锚记链接
语法：

图片整合

1.概念

css sprites，将多个图片融合到一张图里面然后通过css background背景定位·技术技巧布局网页背景。对于大型网站如淘宝能够隐形地提升网站性能。

2.优点

1）通过图片整合来减少对服务器的请求次数从而提高页面的加载速度。
2）通过整合图片从而减小图片的体积。

3.css sprites的实现方法

1）滑动门技术：滑动门是一个很形象的称呼，利用css背景图像可层叠性并允许彼此之上进行滑动来创造一些特殊动态效果。
2）滑动门特征：通过滑动门技术，可以使css设计出的导航菜单兼有=具传统布局的图像效果与css布局的高效扩展性。