原地址:http://blog.163.com/weison_hi/blog/static/17680404720118534033788/

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

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

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

#button{
 background:url(eeo_2.jpg) no-repeat;
 width:100px;
 height:50px;
 border:0px;
 cursor:pointer;
  }

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

<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调用同一张图片里面的不同个按钮图标图片,这样的话便能更优化代码以及网站。

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

button{
 background:url(eeo_2.jpg) no-repeat -54px -35px;
 width:100px;
 height:50px;
 border:0px;
 cursor:pointer;
 }

页面html图片按钮多种写法的更多相关文章

  1. 图片按钮(imageButton)

    图片按钮(imageButton) 常用属性: android:src="@drawable/download" (这里的download是一张图片的名称,通过引用该图片的名称直接 ...

  2. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  3. [CSS]Input标签与图片按钮对齐

    页面直接摆放一个input文本框与ImageButton图片按钮,但是发现没有对齐: <input type="text" id="txtQty" /&g ...

  4. Expression Blend4经验分享:制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  5. html2canvas页面截图图片不显示

    前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...

  6. 自己写一个图片按钮(XAML)

    有时需要用三张图片(正常状态,鼠标移上,鼠标按下)来作为一个按钮的样式,虽然这种做法不好,应该用矢量的方式制作样式,但有的时候还是需要这样做的. 每次都修改按钮的样式来实现这个做法,既麻烦又会生成大段 ...

  7. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

  8. [示例] Firemonkey 图片按钮(3态)

    说明:Firemonkey 图片按钮(支持三种状态:MouseOver, MouseDown, MouseUp,可各别指定图片) 原码下载:[示例]TestImageButton_圖片按鈕(3态).z ...

  9. 请求一个action,将图片的二进制字节字符串在视图页面以图片形式输出

    有些时候需要将二进制图片字节在发送浏览器以图片形式显示: 下面是一些示例代码: 控制器: /// <summary> /// 将图片的二进制字节字符串在视图页面以图片形式输出 /// &l ...

随机推荐

  1. Java 三大特性:封装、继承、多态

    一.封装: 对内 可封装自己的实现细节,使之信息隐藏不被其它类破坏: 对外 各个类之间分工明确, 其它类无需关心实现细节,类中细节发生改变,其它类也无需作出更改: 二.继承: 从已有的类中派生出新的类 ...

  2. 类、对象(java基础知识六)

    1.Java约定俗成 java约定俗成 1,类名接口名 一个单词首字母大写,多个单词每个单词首字母都大写 2,方法名和变量名 一个单词全部小写,多个单词从第二个单词首字母大写 建议:如果能用英语尽量用 ...

  3. 转:Oracle客户端NLS_LANG参数的设置详解

    原文:http://database.51cto.com/art/201107/279361.htm 我们知道,Oracle客户端语言支持可以通过NLS_LANG参数的设置来完成,不同的系统平台上NL ...

  4. 【Java】DateUtil(1)

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...

  5. HTTPS站点搭建教程:Win7/Windows Server 2008R2

    本文将由笔者为各位读者介绍在win7/windows server 2008R2环境下使用SSL加密协议建立WWW站点的全过程:https SSL证书安装的搭建以及本地测试环境. 要想成功架设SSL安 ...

  6. 【转载】浅谈Excel开发:一 Excel 开发概述

    博客园就是好,想要什么都给总结了,多谢 原文转载:http://www.cnblogs.com/yangecnu/p/Excel-Develpment-Introduction.html 做Offic ...

  7. SPFA 最短路 带负权边的---- 粗了解

    SPFA(Shortest Path Faster Algorithm)是Bellman-Ford算法的一种队列实现,减少了不必要的冗余计算. 算法大致流程是用一个队列来进行维护. 初始时将源加入队列 ...

  8. FINDSTR 命令使用详解

    Findstr 使用正则表达式搜索文件中的文本模式. 语法 findstr [/b] [/e] [/l] [/r] [/s] [/i] [/x] [/v] [/n] [/m] [/o] [/p] [/ ...

  9. asp.net MVC 单选按钮的使用

    单选按钮的标准的html 语法 <form><input type="radio" name="sex" value="male&q ...

  10. CodeForces 1103D. Professional layer

    题目简述:给定$1 \leq n \leq 10^6$个正整数$1 \leq a_i \leq 10^{12}$,修改第$i$个正整数$a_i$的花费为$1 \leq e_i \leq 10^9$,以 ...