带来一篇CSS中的滑动门手艺研讨

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。
在CSS中，一个常常被人们会商的先辈的地方即背景图象的可层叠性，并同意他们在相互之长进行滑动，以制造一些特别的效果。依据CSS2.0以后的划定，每个背景图象都必要各自的HTML元素。在很多情形下，典范的标志已为一样平常的接口组件供应了多种元素以供我们利用。
标签导航栏就是个中的一个例子。已往，我们频仍的利用这些标签，并已成了一种十分盛行的站点导航体例。当今，在CSS已被普遍撑持的远景下，我们能够为我们站点制造出更高质量和更好表面的标签导航栏来。你大概晓得CSS能够用来“征服”无序的列表，也许你还已经看到过这类款式的标签列表：
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>假如我们想用和以上相似的标志，将导航标签酿成这类款式，该怎样办呢？
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>经由复杂的计划，我们是能够做到的。
立异于那边？

<p/>我见过的很多基于CSS的导航标签多数具有一类的特性：矩形的色块，大概仅仅是一个表面，关于以后选中的标签则没有边框，标签在鼠标指针游至其上时改动色彩。这岂非就是CSS所能给我们的全体吗？连续串的小盒子和单调的色采吗?
在CSS被普遍接纳之前，我们已看到很多标签导航计划中的立异的地方。首创的形状，纯熟的色采夹杂，和对实在天下中很多物理接口的仿照。可是这些计划常常太过依附于经由庞大制造、带有文本的图象，或被包装成多少嵌套的表格。修正文本或改动标签的按次则必要一个庞大的历程。文本的伸缩更是不成能的，或给页面的结构极年夜的影响。
纯文本的导航栏比起文本即图象的导航栏更具有延续利用性和更快的载进速率。一样，我们乃至能够为每个图象加上alt属性，关于弱视者，纯文本更能够自在的改动巨细。多如牛毛的是，基于纯文本的导航栏，并加以CSS款式，又从头回到Web计划中来。可是，年夜多半基于CSS的导航栏计划，至今为止仍旧是毫偶然义的。一种比来被接纳的手艺（比方CSS）可让我们做的更好，一样不掉先条件到的那些表格和图片标签的效果。
滑动门手艺

<p/>美妙的工艺，真正天真的接口组件，并依据文本自顺应巨细，我们可用两个自力的背景图象来制造它。一个在右边，一个在右侧。把这两幅图象设想成两扇可滑动的门，它们滑到一同并交迭，占有一个较窄的空间；大概互相滑开，占有一个较宽的空间，就像下图所显现的那样：
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>在这个模子中,一个图象掩饰住另外一个图片的一部分。假定我们安排一些共同的内容在每一个图象的四周，比方标签的圆角，我们其实不但愿下面一副图象完整的掩蔽住上面一副。为了避免这类情形的产生，我们能够将下面一副图象（此例中的右边那幅）把持的尽量的窄。但仍旧要包管必定的宽度来展现标签一侧的共同性。假如内部是圆角，我们就应当把持下面一副图象和它的弧线部分具有一样的宽度。
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>假如方针在巨细上增加，并凌驾了以上所显现的宽度，归罪于文本巨细及字体的改动，图象会被拉开，发生不美妙的间隙。我们必要判别的是，展望这类可扩大的量将有多年夜。假如在扫瞄器中改动字体的巨细，方针又会假如增加呢？实践来讲，我们最少应当预算到字体巨细增加至300%的情形。背景图象也得顺应这类增加。关于以上的例子，我们将上面（即右侧）的图象设为400*150像素，下面的设为9*150像素。
在思想中，一直要有如许的熟悉：背景图象只是显现一个可供内容添补的无效空间（即内容地区和padding，称为doorway）。这两幅图象一直和各自内部的边角相锚定。背景图象的可见部分和在一同即构成了一个具有这类标签外形的空间（doorway）：
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>假如标签被撑年夜，图象即滑开，doorway变宽，图象的也将被显现的更多：
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>此例中，我在Photoshop中制造两个光滑，细的3D标签图象，如文章开首所显现的那样。关于其一，外部亮堂，边框昏暗些，用来体现以后选中的标签。将这类技能模子使用于摆布两幅图象中，我们必要扩展标签图象掩盖的地区，将它裁剪成两部分：
<pstyle="TEXT-INDENT:2em"/>

登录/注册后可看大图

<p/>一样的体例将使用到被称为“以后”的标签中。一旦我们完成了这四幅图象（1,2,3,4），我们就能够入手下手用标志和CSS来制造我们的标签了。12下一页

扫尾事情

<p/>灵敏的察看者大概会在上一例注重到红色的标签角落。这些不通明的角用来避免上面的图象透过下面的一副。实际上，我们能够实验利用部分背景图象来顺应标签的背景。可是我们的标签会在高度上增加，实验经由过程挪动背景色彩，背景图象就会绝对变矮。取代的举措是，改动图象，将标签的角落设为通明。假如弧线是反锯齿的，我们在其边沿利用较均匀的背景致彩。
如今，角落已酿成通明色，右边的图象将透过右侧图象的角落。为了抵偿，我们为表单项到场和右边图象宽度相符合的padding（9px）。既然已为表单项到场了padding，我们还需往失落一样的宽度以到达文本的居中（15px-9px=6px）：
#headerli{float:left;background:url("right.gif")no-repeatrighttop;margin:0;padding:0009px;}#headera{display:block;background:url("left.gif")no-repeatlefttop;padding:5px15px4px6px;}
仍未停止，由于到场了9个像素的padding使右边图象与标签的右边之间发生了一段空缺。如今，左边与右边，可见“doorway”的边沿接在一同，我们再不必要将右边图象坚持在上方。因而，互换两幅背景图象的按次，相反过去。一样互换“以后”标签中利用的两幅图象：
#headerli{float:left;background:url("left.gif")no-repeatlefttop;margin:0;padding:0009px;}#headera,#headerstrong,#headerspan{display:block;background:url("right.gif")no-repeatrighttop;padding:5px15px4px6px;}#header#current{background-image:url("left_on.gif");}#header#currenta{background-image:url("right_on.gif");padding-bottom:5px;}
完成这些后，我们抵达了效果4。要注重的是，通明的角落在标签的左边发生了一段不克不及点击的有效地区。这个地区在文本之外，但仍旧是能够发觉到的。在标签的双方都利用通明的图象是没有需要的。假如我们不但愿发生这类有效的地区，那末我们必需利用在标签前面利用色彩，然后用这类色彩来取代标签角落的通明图象。如今我们仅坚持这类通明角落。
关于剩下的成绩，我们将一次性完玉成部的修正：减轻标签文本，将一般标签中的文本改成棕色，“以后”标签文本改成深灰色，往失落链接的下划线，最初将悬停文本性彩改成一样的深灰色。经由一系列的改动，我们将看到今朝为止的效果5。
分歧性的办理

<p/>在效果2以后，我

12下一页

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。

更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
们公认的一个成绩就是在IE5/Mac扫瞄体例下，每一个标签延长并占有了全部扫瞄器的宽度，乃至标签垂直的堆在了一同。这不是我们所但愿的。</p>在年夜多半的扫瞄器中，浮动一个元素会有压缩，压缩最小至它所包括内容的巨细。假如一个浮动元素包括一幅图象或其自己即图象，便会压缩至图象的宽度。假如仅仅包括文本，那末将会压缩至最长的，不成被顶开的那文本的宽度。
一个成绩呈现在IE5/Mac中的图片中，当一个auto-width的块工具元素被拔出到一个浮动的元素中时。其他的扫瞄器仍然将浮动减少至最小，而忽视容器内的块工具元素。但IE5/Mac其实不依照这类情形，相反它将浮动和块工具元素扩大至尽量的宽度。为办理这个成绩，我们将锚链同时浮动起来，但仅仅关于IE5/Mac，以避免保持其他的扫瞄器。起首，我们为锚链设定浮动划定规矩。然后，我们利用反斜杠正文法来埋没这类划定规矩，让它仅仅对IE5/Mac失效，而忽视其他的扫瞄器：
#headera{float:left;display:block;background:url("right.gif")no-repeatrighttop;padding:5px15px4px6px;text-decoration:none;font-weight:bold;color:#765;}/*CommentedBackslashHackhidesrulefromIE5-Mac/*/#headera{float:none;}/*EndIE5-Machack*/
如今IE5/Mac扫瞄器将按我们所希冀的那样来显现标签，看效果6。关于非IE5/Mac的扫瞄器甚么都不必要改动。注重到IE5.0/Mac的一系列注释上的bug在IE5.1中办理。因而，滑动门手艺在5.0版本中所遭受的成绩超越了hack的限制。既然晋级到IE5.1/Mac已不成困难，OS9Macs/IE5.0的占据率应渐渐缩减至很低。
触类旁通

我们方才练习训练了滑动门手艺，用纯文本和无序列表来制造导航标签，加以大批的款式。它的装载速率快，具有可保持性，而且文本的巨细能够在不损坏表面的情形下举行较年夜的伸缩。不用我们再重申在制造庞大款式的导航栏中，滑动门手艺所体现出来的弹性了。
只要想不到，没有做不到。最后的效果向我们展现了一例，但我们计划不成能因而而被限制逝世。
在某些场所，标签纷歧定是对称的。我很快就制造了这类标签的第二个版本，也有暗影3D的款式，有角的边沿，和具有特征的右边部分。根据第二个版本，我们乃至能够互换摆布两幅图象的地位。以这类仔细的结构和乖巧的图象把持，我们能够往失落按钮的下边框以便标签图象更好的往顺应背景，如第三个版本所显现的那样。假如你的扫瞄器撑持多个款式表的切换，你乃至能够靠它在多个版本的导航栏之间自在切换。
仍有很多我们没有提到的其他的效果。疾速的提一下，我改动鼠标悬停的文本性彩，可是端的图象能够交换失落以制造出更风趣的变更效果。即便标志中两个嵌套的HTML元素，也能够用CSS来到达一些我们还未想到的效果。我们在此例中制造的仅仅是程度的标签栏，但滑动门亦可使用于很多其他的情况。左右以为怎样呢？
上一页12

上一页12

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

可以使用 CSS 检查工具进行设计。

学Dreamweaver技术的过程其实是一个增加信心的过程。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

学Dreamweaver技术的过程其实是一个增加信心的过程。

可以使用 CSS 检查工具进行设计。