
css是无法加超链接的,但是可以在一个A标签下设置背景图片加入超链接,具体步骤如下。
1、新建test.html文件。
2、首先要把超链接a块级化,方法如下:
给a添加css代码 : a{ display:block}
代码截图如下:
3、使用backgroung-image为a链接加背景图片,用法如下:
a{ background-image:url(xxx.jpg)}
不过仅仅这样写还不能显示出背景图片,需要和第二步结合才行。
代码截图如下:
4、用到的图片素材如下,图片名字为001.jpg,位置截图如下。
5、实例演示给超链接加背景图片,代码如下:
<html>
<head>
<style>
a{background-image:url(001.jpg)display:blockwidth:300pxheight:100pxfont-size:25px}
</style>
</head>
<body>
<a>我是带背景图片的超链接</a>
</body>
</html>
6、运行效果截图如下。
点击事件只能设置在html元素中,所以background是没有办法设置点击的。但是,它的元素div是有点击事件onclick的。如果div设置onclick无效,建议使用jquery来绑定div的click事件。此外,由于div中还有其它元素有click事件,所以,这就涉及到了事件冒泡的问题。
那么,说到这,指出你的一个代码问题。网页中,html元素的id必须是唯一的。如果id不唯一,一代涉及id,程序可能会出错。而class才是可以重复的。
可以如下纠正:
<input type="submit" name="button" id="btn_searc" value=" " class="button">
<input type="button" name="button" id="btn_ask" value=" " class="button" >
下面就是解决事件冒泡问题了,还是建议jquery来解决
对于div的内层元素,我们使用jquery来绑定它的单击事件,并且静止响应div的单击事件
$('#btn_searc').blind('click',function(event){
searchPost() //这里响应id为btn_searc元素的单击事件
event.stopPropagation() //这局话就是停止事件冒泡了,也就是说,接下来的div的单击事件将不再会被响应。
})
同理,另外一个原色的单击事件可以如下
$('#btn_ask').blind('click',function(event){
ask()
event.stopPropagation()
})
那么,接下来就是去绑定div的单击事件,首先,还是将div的class改成id,并保证其唯一性。同时,css也要改成id的选择器:
#communion_header{
height: 88px
width: 690px
margin: 0 auto
background: url(../../images/communicate/communtion_logo.png) no-repeat 50px 30px
padding: 40px 0 0 270px
}
jquery绑定click
$('#communion_header').click(function(){
//这里写div的单击代码。可以使用JavaScript,更可以使用其进阶语言jQuery
})
最后,需要说明的是,代码使用的是JavaScript语言的一种进阶语言jQuery。它的使用要借助于jQuery库的存在。所以你必须去下载个jquery.js,并且在网页中添加关联。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)