标签背景实现
以前在做导航条时,<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>标签的不同图片样式..
版权声明：本文为博主原创文章，未经博主允许不得转载。
