标签控件应用示例一

作者:chilleen 来源:ITPOW(原创) 日期:2007-2-9

ITPOW控件-标签控件,功能强大,应用方便,但所给的示例看起来似乎过于单调,不具有吸引力,我们这里提供几种应用示例,供大家参考。

本参考是下载包中自带示例改进的,没有改动 JavaScript 代码,重点改动在 CSS。

首先,将 title 浮动到左边,做法是去掉 li 的 float 属性,为 ul 指定 float:left。

然后将 content 浮动到右边。

然后,添加想要的 normalTitle 样式和 activeTitle 样式,分别表示普通 title 和已经激活的 title 的样式。

这里分别是:
li.normalTitle div
{
    /*边框和背景颜色与 block 背景颜色相同*/
    border-top:1px solid #EEEEEE;
    border-bottom:1px solid #EEEEEE;
    background-color:#EEEEEE;
}

li.activeTitle div
{
    border-top:1px solid #FFFFFF;
    border-bottom:1px solid #FFFFFF;
    background-color:#99CCFF;
}

之所以套一层 div 是为了兼容,请参见:多套一层使 padding、border 兼容

在 normalTitle 中,尽管不显示 border,同样应该将 border 设置为 1px,只是颜色同背景一样。

最后,添加其它的样式修饰,如边距。

全部代码:


[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

 

相关文章