button的介绍:
http://www.w3school.com.cn/tags/tag_button.asp
<style>.btn_login{background:url(pic_button01.gif) left top no-repeat; border:0px;width:102px; height:42px; padding:0px; margin:0px; cursor:pointer;}</style><input type="button" class="btn_login" value="登 录">
<html>
<head>
<title>
TopLeft
</title>
</head>
<script>
function mychange(num){
document.getElementById("div1").style.backgroundImage="url("+num+".jpg)";
document.getElementById("div2").style.backgroundImage="url("+num+".jpg)";
}
</script>
</head>
<body>
<div id="div1" style="height:200px; width:200px; background:#FF0000">这是第一个div</div>
<div id="div2" style="height:200px; width:200px; background:#0000FF">这是第二个div</div>
<input type="button" value="第一个按钮" οnclick="mychange(1)" />
<input type="button" value="第二个按钮" οnclick="mychange(2)" />
<input type="button" value="第三个按钮" οnclick="mychange(3)" />
</body>
</html>
<input type=button οnclick="history.back()" value=返回 style="width:200px;height:200px"> //大小
style="cursor:hand"//放在按钮上,鼠标变小手
方法一: IE 下使用expression(this.hideFocus=true), firefox下使用outline: none; (除了FF下对按钮不生效, 其它均有效) 代码:
css:
.hideFocus{hide-focus: expression(this.hideFocus=true);}/* for ie 5+ */
.hideFocus{outline: none;} /* for firefox 1.5 + */
html:
<a href="#" class="hideFocus">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不行要虚线嘛" class="hideFocus" />
这个方法的缺点是IE下使用expression, 增加了浏览器负担, 而且ff下对按钮也不能生效.
方法二: 使用js οnfοcus=blur(); 全生效; 代码:
css: 无
html:
<a href="#" οnfοcus="blur()">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不行要虚线嘛" οnfοcus="blur()" />
这个方法的优点是不需要写任何css代码, 也适应任何情况. 缺点是需要使用js, 而且"链接/按钮"会失去了focus状态, 在一些需要侦测"链接/按钮"focus状态的情况下, 会造成麻烦.
方法三: 结合outline/border/zoom属性实现 代码:
css:
.hideFocus2{outline:0;zoom:1;}
.hideFocus2::-moz-focus-inner{border-color:transparent!important;}/* 让FF下button也生效 */
html:
<h3>方法三: 结合outline/border/zoom属性实现</h3>
<a href="#" class="hideFocus2">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不行要虚线嘛" class="hideFocus2" />
这个方法暂时没看出有啥明显的缺点, 但暂时不是很清楚zoom:1;为什么就能让ie6去掉了虚线, 是因为促发了hasLayout吗? 这个问题以后搞清楚后, 会回来记录上.
css:
.hideFocus{hide-focus: expression(this.hideFocus=true);}/* for ie 5+ */
.hideFocus{outline: none;} /* for firefox 1.5 + */
html:
<a href="#" class="hideFocus">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不行要虚线嘛" class="hideFocus" />
这个方法的缺点是IE下使用expression, 增加了浏览器负担, 而且ff下对按钮也不能生效.
方法二: 使用js οnfοcus=blur(); 全生效; 代码:
css: 无
html:
<a href="#" οnfοcus="blur()">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不行要虚线嘛" οnfοcus="blur()" />
这个方法的优点是不需要写任何css代码, 也适应任何情况. 缺点是需要使用js, 而且"链接/按钮"会失去了focus状态, 在一些需要侦测"链接/按钮"focus状态的情况下, 会造成麻烦.
方法三: 结合outline/border/zoom属性实现 代码:
css:
.hideFocus2{outline:0;zoom:1;}
.hideFocus2::-moz-focus-inner{border-color:transparent!important;}/* 让FF下button也生效 */
html:
<h3>方法三: 结合outline/border/zoom属性实现</h3>
<a href="#" class="hideFocus2">我是链接, 我不想要虚线</a>
<br/><br/>
<input type="button" value="我是按钮, 人家也不行要虚线嘛" class="hideFocus2" />
这个方法暂时没看出有啥明显的缺点, 但暂时不是很清楚zoom:1;为什么就能让ie6去掉了虚线, 是因为促发了hasLayout吗? 这个问题以后搞清楚后, 会回来记录上.