CSS中的滑动门技术(1)

在css中，一个常常被人们计划的进步之处即后台图像的可层叠性，并承诺她们在相互之长进行滑行，以创作少许特出的功效。按照css2.0暂时的规则，每一个后台图像都须要各自的html元素。在很多情景下，典范的标志仍旧为普遍的接口组件供给了多种元素以供咱们运用。

标签导航栏即是个中的一个例子。往日，咱们一再的运用那些标签，并已变成了一种特殊时髦的站点导航办法。现今，在css已被普遍扶助的远景下，咱们不妨为咱们站点创造出更高品质和更好表面的标签导航栏来。你大概领会css不妨用来“克服”无序的列表，大概你还已经看到过这种款式的标签列表：

即使咱们想用和之上一致的标志，将导风向标签形成这种款式，该如何办呢？

过程大略的安排，咱们是不妨做到的。

革新于何处？

我见过的很多鉴于css的导风向标签多数具备一类的特性：矩形的色块，大概只是是一个表面，对于暂时选中的标签则没有边框，标签在鼠标南针游至其上时变换脸色。这莫非即是css所能给咱们的十足吗？延续串的小匣子和缺乏的颜色吗?

在css被普遍沿用之前，咱们仍旧看到很多标签导航安排中的革新之处。创造的形状，流利的颜色搀和，以及对如实寰球中很多物理接口的抄袭。然而那些安排常常过度依附于过程搀杂创造、带有文本的图像，或被包装成几何嵌套的表格。窜改文本或变换标签的程序则须要一个搀杂的进程。文本的舒卷更是不大概的，或给页面包车型的士构造极大的感化。

纯文本的导航栏比起文本即图像的导航栏更具备连接运用性和更快的载入速率。同样，咱们以至不妨为每一个图像加上alt属性，对于弱视者，纯文本更不妨自在的变换巨细。屡见不鲜的是，鉴于纯文本的导航栏，并加以css款式，又从新回到web安排中来。然而，大普遍鉴于css的导航栏安排，于今为止仍旧是毫偶尔义的。一种迩来被沿用的本领（比方css）不妨让咱们做的更好，同样不失先基础到的那些表格和图片标签的功效。

滑行门本领

场面的工艺，真实精巧的接口组件，并按照文本自符合巨细，咱们可用两个独力的后台图像来创作它。一个在左边，一个在右边。把这两幅图像设想成两扇可滑行的门，它们滑到一道并交迭，吞噬一个较窄的空间；大概彼此滑开，吞噬一个较宽的空间，就像下图所表露的那么：

在这个模子中,一个图像保护住另一个图片的一局部。假如咱们安置少许特殊的实质在每个图像的范围，比方标签的圆角，咱们并不蓄意上头一副图像实足的隐蔽住底下一副。为了提防这种情景的爆发，咱们不妨将上头一副图像（此例中的左边那幅）遏制的尽大概的窄。但仍旧要保护确定的宽窄来表露标签一侧的独个性。即使外部是圆角，咱们就该当遏制上头一副图像和它的曲线局部具备一律的宽窄。

即使目的在巨细上延长，并胜过了之上所表露的宽窄，归罪于文本巨细及字体的变换，图像会被拉开，爆发不场面的间歇。咱们须要确定的是，猜测这种可扩充的量将有多大。即使在欣赏器中变换字体的巨细，目的又会即使延长呢？本质来说，咱们起码该当预算到字体巨细延长至300%的情景。后台图像也得符合这种延长。对于之上的例子，咱们将底下（即右边）的图像设为400*150像素，上头的设为9*150像素。

在思维中，一直要有如许的看法：后台图像不过表露一个可供实质弥补的灵验空间（即实质地区和padding，称为doorway）。这两幅图像一直和各自外部的边角相锚定。后台图像的看来局部和在一道即产生了一个具备这种标签形势的空间（doorway）：

即使标签被撑大，图像即滑开，doorway变宽，图像的也将被表露的更多：

此例中，我在photoshop中创造两个光滑，细的3d标签图像，如作品发端所表露的那么。对于其一，里面光亮，边框暗淡些，用来展现暂时选中的标签。将这种本领模子运用于安排两幅图像中，咱们须要夸大标签图像掩盖的地区，将它裁剪成两局部：

同样的办法将运用到被称为“暂时”的标签中。一旦咱们实行了这四幅图像（1, 2, 3, 4），咱们就不妨发端用标志和css来创造咱们的标签了。

标签的创作

当你在接洽用css来创作程度列表时，会创造至罕见两种本领将列表项安置在同一条龙里。两种本领半斤八两，但都须要css来处置构造所带来的凌乱。一种本领运用inline box，另一种则用floats。

本领一，大概是比拟一致的一种，是将列表项都inline表露。inline本领的魅力在乎它的简略性。然而，对于咱们行将提出的滑行门本领来说，inline本领在一定的欣赏器上生存少许证明上题目。本领二，是咱们将要关心的，即用floats将列表项安置在同一条龙里。令人懊丧的是，floats外表上冲突的动作恰巧侧目了天然的论理。纵然如许，对于处置多重浮动元素的基础看法，以及真实浮动的意旨，仍是犯得着计划的。

咱们将用另一种浮动元从来处置浮动元素的陈设题目。如许，父类元素将子类元素实足囊括起来。所以，咱们就不妨为标签加上背局面彩和后台图像。特殊要害的一点必需记取，跟不上在标签后的文本元素用css中的clear功效来废除浮动东西。如许制止了浮动标签感化页面上其它元素的场所。

咱们从以次的标志发端：

<div id="header"> <ul> <li><a href="#">home</a></li> <li id="current"><a href="#">news</a></li> <li><a href="#">products</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul></div>

实际中，#header div大概同样包括logo和探求框。对于咱们的例子，咱们要减少每一个锚链中超链接的值。明显，那些值该当精确的包括文献大概目次的场所。

咱们从定位#header容器发端安排列表。如许保证了这个容器确真实实的充任了容器的效率，以容纳它里面浮动的列表项。既是元素是浮动的，咱们同样须要证明它的宽窄为100%。介入偶尔的黄色后台以保证父类容器实足填满标签反面的所有地区。同样，设定默许的文本属性，保证款式的一致：

#header { float:left; width:100%; background:yellow; font-size:93%; line-height:normal; }

此刻，咱们同样须要为无序列表设定默许的margin/padding值为0，并去掉列表项前方的标志。每个列表项左浮动：

#header ul { margin:0; padding:0; list-style:none; }#header li { float:left; margin:0; padding:0; }

设定锚链强迫动作块东西呈递，咱们便可无忧的遏制一切的款式：

#header a { display:block; }

下一步，咱们将右侧的后台图像介入到列表项中去（变换如粗体所示）：

#header li { float:left; background:url("norm_right.gif") no-repeat right top; margin:0; padding:0; }

在介入左侧图像之前，咱们不妨在功效1种看看暂时为止的功效。（在功效中，忽视body中的准则。仅设定基础margin,padding,colors,text的属性。）

---

此刻咱们不妨将左侧图像安置在锚链的左边（容器内的元素）。咱们同声介入padding，夸大标签并将文本从标签的边际推开：

#header a { display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px; }

如许咱们就获得了功效2。提防咱们的标签是怎样成型的。在这边，ie5/mac的用户会连忙诧异道，“天啊，我的标签笔直堆在一道而且蔓延至所有屏幕！”不要焦躁，咱们赶快帮你处置。眼下，尽管依照底下去做，大概简单的话，偶尔变换其余的欣赏器，而且ie5/mac本子的题目会赶快获得处置。