认识学习CSS中的滑动门技术

认识学习CSS中的滑动门技术[@more@]

　　在CSS中，一个经常被人们讨论的先进之处即背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。根据CSS2.0当前的规定，每一个背景图像都需要各自的HTML元素。在许多情况下，典型的标记已经为一般的接口组件提供了多种元素以供我们使用。 

　　在CSS中，一个经常被人们讨论的先进之处即背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。根据CSS2.0当前的规定，每一个背景图像都需要各自的HTML元素。在许多情况下，典型的标记已经为一般的接口组件提供了多种元素以供我们使用。

　　标签导航栏就是其中的一个例子。过去，我们频繁的使用这些标签，并已成为了一种非常流行的站点导航方式。现今，在CSS已被广泛支持的前景下，我们可以为我们站点制作出更高质量和更好外观的标签导航栏来。你也许知道CSS可以用来“驯服”无序的列表，或许你还曾经看到过这种样式的标签列表：

 

　　如果我们想用和以上类似的标记，将导航标签变成这种样式，该怎么办呢？

　　经过简单的设计，我们是可以做到的。

　　创新于何处？

　　我见过的许多基于CSS的导航标签大都具有一类的特征：矩形的色块，也许仅仅是一个轮廓，对于当前选中的标签则没有边框，标签在鼠标指针游至其上时改变颜色。这难道就是CSS所能给我们的全部吗？一连串的小盒子和单调的色彩吗?

　　在CSS被广泛采用之前，我们已经看到许多标签导航设计中的创新之处。独创的外形，熟练的色彩混合，以及对真实世界中许多物理接口的模仿。但是这些设计往往过分依赖于经过复杂制作、带有文本的图像，或被包装成若干嵌套的表格。修改文本或改变标签的顺序则需要一个复杂的过程。文本的伸缩更是不可能的，或给页面的布局极大的影响。

　　纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快的载入速度。同样，我们甚至可以为每一个图像加上alt属性，对于弱视者，纯文本更可以自由的改变大小。不足为奇的是，基于纯文本的导航栏，并加以CSS样式，又重新回到Web设计中来。但是，大多数基于CSS的导航栏设计，至今为止仍然是毫无意义的。一种最近被采用的技术（例如CSS）可以让我们做的更好，同样不失先前提到的那些表格和图片标签的效果。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/10901326/viewspace-965904/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/10901326/viewspace-965904/