Ajax标签导航实例详解-CSS技巧篇_[AJAX教程]

Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/3/16 2:52:25
Ajax标签导航实例详解-CSS技巧篇_[AJAX教程]

CSS技巧篇（position属性的运用技巧）

下面开始我们的分析了，先来看看这段XHTML代码：

网站重构

CSS布局实录

海啸的地盘

Ajax高级编程

PRG全棉短袖衬衣最后的抢购机抢购机 2006-08-15

PRG全棉短袖衬衣最后的抢购机抢购机 2006-08-15

PRG全棉短袖衬衣最后的抢购机抢购机 2006-08-15

PRG全棉短袖衬衣最后的抢购机抢购机 2006-08-15

PRG全棉短袖衬衣最后的抢购机抢购机 2006-08-15

PRG全棉短袖衬衣最后的抢购机抢购机 2006-08-15

id="news" - news就是我们的导航标签的ID；
id="newsCnt" - newsCnt就是我们要写入信息的目标DOM节点；
class="first" - first当前(第一个)标签的样式；
id="news-0" - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签[li]在导航标签中的索引值）
网站重构 - 超链接
- 标签间的分割线

我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。

/* 导航标签的样式 */
.tabs li{
float:left;
display:inline;
text-align:center;
width:120px;
height:12px;
padding:4px 0 6px 0;
overflow:hidden;
letter-spacing:1px;
position:relative;
}

/* 标签分割线的样式 */
.tabs li span{
position:absolute;
right:0;
top:3px;
width:2px;
height:16px;
overflow:hidden;
font-size:1px;
background-image:url(../img/tab_sline.gif);
}

技巧就是.tab li中的”position:relative;“和.tabs li span中”position:absolute;“结合使用的技巧（呵呵，其实我也是看了YAHOO的标签后才这么用的）。现在我们就来了解下position属性吧（CSS讲座开始，不过是好东西哦，呵呵！）：

position：绝对定位，指本体对上级的定位（本人理解的说法），有3个可选值static（静态定位-默认值）、relative（绝对相对定位）、absolute（绝对定位）。

relative：他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合top、right、bottom、left进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。如下图一：

absolute：他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。如下图二：

不知道你看出些其他的什么特性出来了没有？我们仔细看下图二，你发现没有，在用absolute定位的时候，它可以覆盖在与其相邻的节点上（不是因为它设置了z-index属性），而是它的一个特性--不占布局或者说不影响邻居节点的布局。而relative则不一样，它会影响邻居节点的布局。我们通过图一还看不出来，来看图三：

大家注意到图片中的灰色部分没有？这个就是我要说的，这块灰色的部分的大小就是#relative的大小，这个说明了什么？表明它会影响邻居节点的布局，而且邻居节点接下来的位置就是#relative使用一般margin定位的末端。讲详细点，就是说虽然#relative显示的在屏幕的位置是红色块的地方，但是实际仍然要占据它起始位置所在的布局（它的宽和高）的大小。这里#relative的起点是body，那么它站的布局就是从body起点开始width:250px;height:250px;（加padding:5px）的布局（大小），也就是我们看到图中灰色部分。呵呵，好绕是吗？仔细看看，多用下就明白了。

好了，现在就我们ajax标签导航中使用的是relative+absolute的结合，当一个absolute的节点包含在一个relative的节点中时，它的”原始点“就是relative节点了，而不是“参照浏览器的左上角-body”了，而它又不影响其邻居节点的布局，所以它就不会影响

中间文字（文本节点）的布局了（这里li的空间够大）。这样以来，就得到了我们标签中，每个标签后有一个分隔线的样式了。如图四：

OK，我们对position属性和它的值的使用搞清楚了。接下来就来看看是怎么来更改当前选中标签（li）的样式吧:

.tabs li{
float:left;
display:inline;
text-align:center;
width:120px;
height:12px;
padding:4px 0 6px 0;
overflow:hidden;
letter-spacing:1px;
position:relative;
}

/* 第一项被选中的样式 */
.tabs li.first{
background-image:url(../img/tab_active1.gif);
}

/* 其他项被选中的样式 */
.tabs li.current{
background-image:url(../img/tab_active2.gif);
}

/* 被选中项的字体样式 */
.tabs li.current,
.tabs li.first{
font-weight:bold;
}

/* 被选中项的链接颜色样式 */
.tabs li.current a,
.tabs li.first a{
color:#D45417;
}

.tabs li span{
position:absolute;
right:0;
top:3px;
width:2px;
height:16px;
overflow:hidden;
font-size:1px;
background-image:url(../img/tab_sline.gif);
}

/* 选中项和选中项前一项的样式 */
.tabs li.first span,
.tabs li.current span,
.tabs li.off span{/* 选中项前一项 */
display:none;
}

这里要简单说的就是样式表CSS继承（层叠）的顺序，一定要是先写标签(li)标签默认（背景）样式再写选中时的（背景）样式，然后是默认分隔线（span）-> 选中时 -> 失去焦点时这样一个顺序。至于CSS的继承顺序的具体只是，大家可以google一下。