以前在做导航条时,<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>标签的不同图片样式..
分享到:
相关推荐
用于表现修改个人标签,使用UICollectionView实现,动态背景框使用UICollectionViewFlowLayout的DecorationView实现.zip,用于表现修改个人标签,使用UICollectionView实现,动态背景框使用...
html5实现腾讯QQ登录界面背景动画特效(QQ背景动态)+js,可以有效的学习html标签,制作出所见即所得的东西。高大上的背景!
.setMessage("现在选中了:"+tabId+"标签") .setPositiveButton("确定", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int ...
jQuery实现鼠标滑过自动触发标签切换大背景特效源码.zip
主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下
找了好久终于才找到这种用图片做tab标签切换背景的效果,其实现原理是将两种效果做到一个图片上,鼠标移动到tab标签上时背景位置做下调整,原理很简单,懒人之家推荐下载
本文首先阐述了项目的来源和背景,划定项目及论文的范围,并分析该领域国内外的发展现状,最后设定了论文拟达到目标。然后运用软件工程的方法,从需求分析开始,逐步介绍系统概要设计、详细设计实现及系统测试,详细阐述...
Android实现在图片左上角或右上角显示文字标签,相信这个功能大家以前肯定见到过,只是不知道如何形容这个功能,本实例还可实现调整标签文字的大孝标签与图片边角的距离、修改标签文字和标签背景颜色、标签宽度和...
android 为TabHost添加标签的实现源码,新建一个newTabSpec(newTabSpec),设置其标签和图标(setIndicator),设置内容(setContent),设置TabHost的背景颜色,设置TabHost的背景图片资源,mTabHost....
1.一组标签用一个ul来管理,每一个标签是ul中的一个li;标签下面的内容就是用div来管理 2.跟在浮动元素(float)...3.实现当前标签和内容区域的融合,可以通过使用相同的背景色,外加当前标签使用同颜色的边框来实现。
一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式 二、解决 1、首先有一个图片数组,如: export class AppComponent { array = [url(/assets/images/img1.png),url(/assets/images/img...
java写的记事本 可以支持多文本操作, 没给标签各自独立,有专用的格式 可以设置背景 字体,还有很多bug 欢迎指正 hgtc@163.com
点击a标签的时候给其换背景的方法有很多,在本文将为大家介绍下js是如何实现的,感兴趣的朋友不要错过
webview动态实现字体颜色大小背景的修改,需要js支持。
之前在网页中看到很多类似标签的效果,第一反应就是,这肯定是图片背景铺成的嘛,顶多使用svg 后来仔细看了下代码才发现,html中仅仅是一个a标签而已,其他的都在CSS中实现 并且没有使用任何图片之类的东东,...
js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下 废话不多说了,直接给大家贴代码了: <html> <head> <meta ...
使用a标签来实现两个页面的相互跳转,设置超链接的文本和目标地址。 html登录注册页面 使用div标签来划分页面的不同区域,方便进行样式设置和内容填充。 使用label标签来为输入框添加文本标签,方便用户输入和验证。...
使标签div居于父容器右上角,设置内容居中显示,设置背景和字体颜色,旋转该div。 将父容器设置overflow: hidden,实现父容器对标签div超出部分的遮挡,即实现了标签效果。 结构展示 代码示例 <!DOCTYPE ...