图片按钮

图片按钮也比较实用,总结出几种主要的代码片段。

最简单 的:

1
2
3
4
5
6
7
8
9
<style>
a img {
	border:none;
}
</style>

<a href="#">
<img src="#" alt="#" width="960" height="600" src="?">
</a>

图片按钮的应用场景

第一种、在一般情况下按钮提交表单:

1
2
3
<form id="form1" name="form1" method="post" action="index.html">
<input type="submit" name="button" id="button" value="提交" />
</form>

这样提交按钮是标签 <input type="submit">,如果想换成图片加上样式,把 value=”提交” 改成 value=” “,这样“提交”两个字就不会显示在这张背景图片的上面。

1
2
3
4
5
6
7
#button {
	 background:url( test.jpg ) no-repeat;
	 width:100px;
	 height:50px;
	 border:0px;
	 cursor:pointer;
}

第二种、直接使用图片标签按钮

1
2
3
<form id="form1" name="form1" method="post" action="index.html">
<input name="submit" type="image" value="ee" src="eeo_2.jpg" />
</form>

这样子直接写在 HTML 上就能直接看到按钮是图片。

第三种、图片按钮组

由于上面第二种图片直接使用 src 链接,但是如果一个网站很多需要到表单图片按钮展示的话,这样就会增加网页显示的速度。

这种情况,可以把全部类型差不多的图片整合成一张,每个页面使用 CSS + DIV,调用同一张图片里面的不同个按钮图标,这样能优化代码以及网站。

1
2
3
<form id="form1" name="form1" method="post" action="index.html">
  <input name="submit" type="image" value="ee" src="eeo_2.jpg" />
</form>

CSS 样式:

1
2
3
4
5
6
7
button{
	background:url(eeo_2.jpg) no-repeat -54px -35px;
	width:100px;
	height:50px;
	border:0px;
	cursor:pointer;
 }

本文最后修改时间: 2015年08月15日 17:19:48 (完) CC BY-NC-ND 3.0

若您发现文章中的错误,并愿告知于我,或想与我交流,我的联系方式在: Contacts


上一篇 页面刷新

All The Best

下一篇 《自学数据结构》听课笔记