网页图片按钮的生成与美化
作者：荆棘鸟 来源：荆棘鸟's Blog 发布时间：2008-12-12 13:03:00
标签：按钮,美化,表单,图片,css
图片按钮是我们经常应用的网页元素，按钮的生成有两种方法，一个是用链接<a>来模拟按钮，一个是用现成的表单按钮。
<input id="searchbutton" type="submit" class="inputbutton" name="submit1" value="搜索" />
我觉得“表单按钮”比用“链接按钮”要好，更符合标准的语义化。而且“表单按钮”天然就具有按下动态效果，不需要额外增加代码。
按钮的CSS 美化方法，无论是“链接按钮”还是“表单按钮”，一般都是用背景图来美化。设好按钮宽度值，清除按钮边框值，找个满意的按钮图片bg.gif做为背景图即可。
width: 50px;
height: 30px;
border: none;
font-size: 12px;
color: black;
cursor: hand;
background: url(bg.gif) no-repeat left top;
网上还流传一篇“CSS实现的几个非常漂亮的按钮”的文章，没有用到背景图，而是用CSS 滤镜实现的，但在Firefox中就会失效，露出难看的灰色底色，兼容性比较差，不推荐。
此外，如果仅需要按下按钮网页跳转的效果，而不需提交表单的话，用“链接按钮”比较好，非要用“表单按钮”实现的话，给按钮增加一个onclick 事件即可。
0
投稿猜你喜欢
- 直接看代码using System;using System.Configuration;using MySql.Data.MySqlCli
- 一、什么是xml？有何特征？xml即可扩展标记语言，它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。例子：
- 一个页面执行一次Sql语句的话，不会影响到性能。如果一个页面要执行很多次Sql语句，而且使用的是同一个数据库连接，那么上面的方法可能会影响到
学习前言一起来看看Efficientdet的keras实现吧，顺便训练一下自己的数据。什么是Efficientdet目标检测算法最近，谷歌大- 本文实例讲述了python同时给两个收件人发送邮件的方法。分享给大家供大家参考。具体分析如下：该范例通过python内置的smtplib包发
- VS2013的简单WInForm控件，通过WebRequest，WebResponse来访问，接收：private void btn_int
- 环境：pyecharts库，echarts-countries-pypkg，echarts-china-provinces-pypkg，ec
- 1、打开文件得到文件句柄并赋值给一个变量2、通过句柄对文件进行操作3、关闭文件示例文件'你好呀'我是于超嗯再见文件操作基本流
- 逻辑斯蒂映射在混沌数学中是一个很经典的例子，它可以说明混沌可以从很简单的非线性方程中产生。逻辑斯蒂映射公式如下：x_n表示当前人口与最大人口
- 前言大家都知道，一条查询语句走了索引和没走索引的查询效率是非常大的，在我们建好了表，建好了索引后，但是一些不好的sql会导致我们的索引失效，
- 前言这篇博文发布后，有朋友问有没有SQL server版本的，现在有了==》传送门一、场景再现在一个erp进销存系统或0A等其他系统中，如果
- 性能监控一、web项目（如gin中）1.使用ginpprofimport "github.com/DeanThompson/gin
- 如图所示，我们要计算任意两个向量之间的夹角。（图中的坐标数字是估计值，随手给定）python代码如下import math AB = [1,
- 本文实例讲述了Python基于pygame实现图片代替鼠标移动效果。分享给大家供大家参考，具体如下：想想现在学校pygame有几个钟了，就写
- 目录提问：回答：真实情况：知识点结论：总结提问：mysql的字段，unsigned int(3), 和unsinged int(6), 能存
- python实现日期判断和加减操作#====================================================
- 这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 知识点爬虫基本流程re正则表达式简单使用requestsjson数据解析方法视频数据保存开发环境Python 3.8Pycharm爬虫基本思
- python字符串查找函数的使用打开Python开发工具IDLE，新建‘findstr.py'文件，并写代码如下：s ='/
- 功能如下： 这里就需要一开始只显示6个数据，点击展开才显示全部HTML里调用showdetailList：<div>
