标签背景实现

以前在做导航条时,<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>标签的不同图片样式..

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值