认识学习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版本的问题会马上得到解决。

　　现在，一般标签的背景图像已经完成了，我们要为“当前”标签更换图像。我们通过对目标列表项加入id="current"和锚链来实现。既然不需要改变背景的其他外观，图像除外，我们就使用background-image的特性：

　　#header #current {

　　 background-image:url("norm_right_on.gif");

　　 }

　　#header #current a {

　　 background-image:url("norm_left_on.gif");

　　 }

　　我们要在标签下添加一条边框。但是，将边框属性应用于父类的#header容器上，将不能解决“当前”标签无需边框的问题。于是我们制作新的带有边框的图像以代替它。同样，我们可以为它加入渐变效果：

css中的滑动门技术（图八） src="http://www.cnwebshow.com/up/pic/0607182114400/7.gif" border=0>

 

　　我们将图像放置到#header容器的背景中去（代替原有的黄色背景），将背景图像移至到最下方，并为图像上方留出的空白添加相应的背景颜色。同时，去掉由body继承下来的padding，为ul的上、左、右边加进10像素的padding：　

　　#header {

　　 float:left;

　　 width:100%;

　　 background:#DAE0D2 url("bg.gif")

　　 repeat-x bottom;

　　 font-size:93%;

　　 line-height:normal;

　　 }

　　#header ul {

　　 margin:0;

　　 padding:10px 10px 0;

　　 list-style:none;

　　 }

　　我们必须让“当前”标签覆盖边框，如下面提示的那样。你也许会认为我们将要把底部边框加入到与其颜色相对应的、#header背景图像中去，然后将“当前”标签的底部边框颜色改为白色。但是，对于挑剔的观察者，还是会发现一些细小的差别。于是，我们改变锚链的padding，为“当前”标签创造出直角来，如下面放大的例子：

css中的滑动门技术（图九） src="http://www.cnwebshow.com/up/pic/0607182114400/8.gif" border=0>

　

　　　我们通过减少1像素普通锚链的底部padding值（5px-1px=4px）来实现，然后为“当前”锚链补上减去的padding。　

　　#header a {

　　 display:block;

　　 background:url("norm_left.gif")

　　 no-repeat left top;

　　 padding:5px 15px 4px;

　　 }

　　#header #current a {

　　 background-image:url("norm_left_on.gif");

　　 padding-bottom:5px;

　　 }

　　经过改变，底部边框将在普通标签中出现，而在“当前”标签中则隐藏了起来。于是，我们得到了效果3。

敏锐的观察者也许会在上一例注意到白色的标签角落。这些不透明的角用来防止下面的图像透过上面的一副。理论上，我们可以尝试使用部分背景图像来适应标签的背景。 但是我们的标签会在高度上增长，尝试通过移动背景颜色，背景图像就会相对变矮。代替的办法是，改变图像，将标签的角落设为透明。如果弧线是反锯齿的，我们在其边缘使用较平均的背景色彩。

　　现在，角落已经变成透明色，左边的图像将透过右边图像的角落。为了补偿，我们为表单项加入和左边图像宽度相吻合的padding（9px）。既然已经为表单项加入了padding，我们还需去掉同样的宽度以达到文本的居中（15px-9px=6px）：　

　　#header li {

　　 float:left;

　　 background:url("right.gif")

　　 no-repeat right top;

　　 margin:0;

　　 padding:0 0 0 9px;

　　 }

　　#header a {

　　 display:block;

　　 background:url("left.gif")

　　 no-repeat left top;

　　 padding:5px 15px 4px 6px;

　　 }

　　仍未结束，因为加入了9个像素的padding使左边图像与标签的左边之间产生了一段空白。现在，左侧与右侧，可见“doorway”的边缘接在一起，我们再不需要将左边图像保持在上方。于是，交换两幅背景图像的顺序，相反过来。同样交换“当前”标签中使用的两幅图像：　

　　#header li {

　　 float:left;

　　 background:url("left.gif")

　　 no-repeat left top;

　　 margin:0;

　　 padding:0 0 0 9px;

　　 }

　　#header a, #header strong, #header span {

　　 display:block;

　　 background:url("right.gif")

　　 no-repeat right top;

　　 padding:5px 15px 4px 6px;

　　 }

　　#header #current {

　　 background-image:url("left_on.gif");

　　 }

　　#header #current a {

　　 background-image:url("right_on.gif");

　　 padding-bottom:5px;

　　 }

　　完成这些后，我们到达了效果4。要注意的是，透明的角落在标签的左侧产生了一段不能点击的无效区域。这个区域在文本以外，但仍然是可以察觉到的。在标签的两边都使用透明的图像是没有必要的。如果我们不希望产生这种无效的区域，那么我们必须使用在标签后面使用颜色，然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。　

　　对于剩下的问题，我们将一次性完成全部的修改：加重标签文本，将普通标签中的文本改为棕色，“当前”标签文本改为深灰色，去掉链接的下划线，最后将悬停文本色彩改为同样的深灰色。经过一系列的改变，我们将看到目前为止的效果5。