首页 >web前端 >html教程 >关于图片按钮问题_html/css_WEB-ITnose

关于图片按钮问题_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:14:09913浏览

想做最简单的静态图片按钮(就是无论鼠标移不移过去,无论鼠标点不点击,图片都还是那个样子)。在网上看到文章说应该用INPUT来做,但是该文章又说应该用INPUT的SUMIT按钮来做,说比INPUT的IMAGE按钮读取图片速率要快,真的有这样的差别的吗?另外想问的是ASP.NET里面也有个IMAGEBUTTON,用IMAGEBUTTON的话有什么分别?


回复讨论(解决方案)

直接一个关于图片按钮问题_html/css_WEB-ITnose,配上cursor:pointer,搞定。^_^

直接一个关于图片按钮问题_html/css_WEB-ITnose,配上cursor:pointer,搞定。^_^
但是得链接到指定网址啊,比如说点击图片链接到www.163.com,那怎么搞……?

额 光实现功能的话
关于图片按钮问题_html/css_WEB-ITnose
效率就不敢说了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} .btn{ height:18px; line-height:18px; padding:5px 10px 0; margin:15px; float:left;display:inline-block; color:#333; font-size:12px; text-decoration:none; background:url(http://image0.139cm.com/rm/richmail/images/mutualBtn.png) 0 -132px repeat-x; position:relative;} .btn{ height:18px; line-height:18px; padding:5px 10px 0; float:left;display:inline-block; font-size:12px; background:url(http://image0.139cm.com/rm/richmail/images/mutualBtn.png) 0 -132px repeat-x;} .btn i{display:inline-block;}.l_border,.r_border{width:3px; height:24px;display:inline-block; background:url(http://image0.139cm.com/rm/richmail/images/mutualBtn.png) no-repeat; position:absolute;} .btn i.l_border{background-position: 0 -26px; left:0; top:0px;} .btn i.r_border{background-position: -3px -26px; right:0px; top:0px;}  </style>    </head> <body>  <a href="#" class="btn"><i class="l_border"></i>删 除<i class="r_border"></i></a><a href="#" class="btn"><i class="l_border"></i>删 除<i class="r_border"></i></a><a href="#" class="btn"><i class="l_border"></i>删 除<i class="r_border"></i></a>  </body></html>


我用a标签模拟了一个自适应的按钮,其实其它效果的都类似~你看看吧

引用 1 楼  的回复:

直接一个关于图片按钮问题_html/css_WEB-ITnose,配上cursor:pointer,搞定。^_^

但是得链接到指定网址啊,比如说点击图片链接到www.163.com,那怎么搞……?
一句脚本就行了。当然也可以用3楼的。

额 光实现功能的话
关于图片按钮问题_html/css_WEB-ITnose
效率就不敢说了
我之前也是这样搞的,可出现一个问题,我想把页面所有链接颜色改成黑色的时候,设置"color:black"。在IE 9下面,图片会给描上一个黑色的框,如果把COLOR改蓝色的话也会描上一个蓝色的框。在CHROME等等却不会这样,郁闷死了。PS:我在A的CSS下也没加过BORDER的设置,很奇怪不知道为啥会有这样的怪效果。

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn