标签背景实现

以前在做导航条时,<a>标签都采用相同的初始背景与鼠标滑过背景.所以可以在CSS中写入总的效果CSS代码即可.如

a{

background:url(bg1.jpg) no-repeat;

}

a:hover{

background:url(bg11.jpg) no-repeat;

}

这样所有的<a>都采用了相同初始和鼠标滑过样式...

但如果几个不同的<A>标签,要采用不同的背景,用以上的方法就不行了.如有四个<A>标签,每一个的初始背景与鼠标滑过背景都不一样.那么就不能用以上的统一设置方法了.必须对每个<A>采用单独的,不同的设置..

我的实现方法为,把每个<A>标签,用<SPAN></SPAN>括起来,然后给<SPAN>设置class属性,如第一个<A>的设置为:

<span class="first"><a href="1.htm">1111</a></span>

然后对此写上CSS代码(可以是页内样式,也可以是外部文件样式)如下:

.first{

......(省略的样式设计)

}

.first a{

background:url(bg1.jpg) no-repeat;

}

.frist a:hover{

background:url(bg11.jpg) no-repeat;

}

以上设置意思为:first样式中的<a>初始图片和鼠标滑过图片.

同理对第二个,第三个,第四个这样处理.如:

<span class="second"><a href="2.htm">2222</a></span>

.second{

......(省略的样式设计)

}

.seconda{

background:url(bg1.jpg) no-repeat;

}

.seconda:hover{

background:url(bg11.jpg) no-repeat;

}

第三个......

第四个......

这样就很巧妙的解决了,不同<A>标签的不同图片样式..

以前在做导航条时,<a>标签都采用相同的初始背景与鼠标滑过背景.所以可以在CSS中写入总的效果CSS代码即可.如

a{

background:url(bg1.jpg) no-repeat;

}

a:hover{

background:url(bg11.jpg) no-repeat;

}

这样所有的<a>都采用了相同初始和鼠标滑过样式...

但如果几个不同的<A>标签,要采用不同的背景,用以上的方法就不行了.如有四个<A>标签,每一个的初始背景与鼠标滑过背景都不一样.那么就不能用以上的统一设置方法了.必须对每个<A>采用单独的,不同的设置..

我的实现方法为,把每个<A>标签,用<SPAN></SPAN>括起来,然后给<SPAN>设置class属性,如第一个<A>的设置为:

<span class="first"><a href="1.htm">1111</a></span>

然后对此写上CSS代码(可以是页内样式,也可以是外部文件样式)如下:

.first{

......(省略的样式设计)

}

.first a{

background:url(bg1.jpg) no-repeat;

}

.frist a:hover{

background:url(bg11.jpg) no-repeat;

}

以上设置意思为:first样式中的<a>初始图片和鼠标滑过图片.

同理对第二个,第三个,第四个这样处理.如:

<span class="second"><a href="2.htm">2222</a></span>

.second{

......(省略的样式设计)

}

.seconda{

background:url(bg1.jpg) no-repeat;

}

.seconda:hover{

background:url(bg11.jpg) no-repeat;

}

第三个......

第四个......

这样就很巧妙的解决了,不同<A>标签的不同图片样式..