玩转表单之花样表单(4)
作者:佚名 发布时间:2011-04-25 19:17:00
样例15:边框的特殊设计展示
聪明的读者一定会想到,如果设计单边框,一定更加漂亮,对!下面我们来尝试以下部分边框的设置效果,本例仅仅以Solid和dotted两种类型的边框作演示,其它类型的边框原理相同: 注意:边框类型的外观如下:
none :无边框。与任何指定的border-width值无关;
dotted :点线;
dashed :虚线;
solid :实线边框;
double :双线边框。两条单线与其间隔的和等于指定的border-width值;
groove :3D凹槽;
ridge :边框突起;
inset :3D凹边;
outset :3D凸边;
2、图像魔法
图像,是网页的重要元素,能否应用到表单中呢?接下来,我们用图像来改造死板的表单,分两个部分来探讨:用图像代替按钮、用背景图美化表单元素。
2.1 用图像代替按钮
由于默认的表单按钮太丑陋,绝大多数的网站采用了图像按钮,那么,我们通过两个实例来看看怎样实现的:
样例16:用图像代替提交按钮:
当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是:
<input type="image" name="..." src="url" width="" height="..." border="...">
除了标签改为input type="image"以外,其它的属性和<img>标签的属性是一样的,例如:
是不是只要用图片就可以代替所有的按钮呢?是的,不过,不是上面这么简单了,必须加上事件函数,不然的话,图片都是提交按钮,不能完成复位等功能,看看下面的例子就知道了:
样例17:用图片代替所有的表单按钮:
注意:
代替submit按钮的图片代码格式是
<input type="image" name="..." src="..." onClick="document.formName.submit()">代替reset按钮的代码图片格式是
<input type="image" name="..." src="..." onClick="document.formName.reset()">
注:这里的formName是表单的name属性值。
2.2 用背景图美化表单元素
其实,前面已经提到过,用background-image:url()属性来定义表单元素的背景图,这里仅举一例,可以看到,除了select没有效果以外,其它的都可以配合网页的背景来设置它们。
样例18:背景图的设置
猜你喜欢
- <!--#include file="strcheck.asp"--> <% '笔者在写程序的
- 1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,field2,...) sel
- Yahoo和Google都有自己的建设高性能网站最佳实践, 我不做赘述, 需要了解的自行查阅资料:Yahoo的: Best Practice
- 如何验证信用卡是否可用,合法? 核实信用卡的真伪是一件麻烦的事儿,看看下面的代码,也许会给你帮上忙:<Script 
- 如何向前端推送用户请求的信息?postinfo.htm<head><title>asp教程之回应用户请求信息&nbs
- 背景 background css 说明 background-image:url(&q
- 经常看见MOP上有人贴那种动态的图片,就是把一个字符串作为参数传给一个 * 页,就会生成一个带有这个字符串的图片,这个叫做文字水印。像什么原
- 语言是信息传播的主要障碍。多语言网站,顾名思义就是能够以多种语言(而不是单种语言)为用户提供信息服务,让使用不同语言的用户都能够从同个网站获
- 一个用asp来处理jmail发信的过程,及使用方法. 发信时,直接调用这个过程就行了,很方便。<% dim
- asp函数代码 代码如下:<% Function RemoveHTML(str) Dim objRegExp, Match,strHT
- 我设了个排卖的起始时间然后设了一个结束时间现在要精确到小时比如提示 “离到期时间:1天XX小时”大家有什么想法吗?我就是在小时总是不能实现,
- 作为一个网页设计师,不知道各位是否有这样的经历:客户给你的网站材料很多都是Word文档,虽然阅读起来很
- 在一般的情况下,使用批量fetch的几率并不是很多,但是Oracle提供了这个功能我们最好能熟悉一下,说不定什么时候会用上它。declare
- 根据 Dotzler 的统计,IE6 的份额正在缩水,这可能是 2009 年本人听到的第一个好消息。于此同时,Gmail 的浏览器支持列表中
- function createobj() { if (window.ActiveXObject)&n
- 现在我将清除页面缓存的一些方法总结如下:1、在Asp页面首部加入<% Response.Buffer = True
- 如果我们的web应用有大量的异步请求,而这些异步请求是在web服务器认证的情况下,那当我们请求发生在服务器认证失效下,服务器自动302到登录
- 1 什么是prototype JavaScript中对象的prototype属性,可以返
- 想做个和IBM公司一样的网站LOGO,试了半天也没有做出来,郁闷之下,只好求高手帮助!先在这里谢谢了!方法一1、写上IBM,调节字号颜色2、
- 前言 一直用ASP+ACCESS来编写网页和公司的内部应用系统,内部应用系统也就是大家说的OA吧,这个我也不知道,公司又叫它ERP,反正不管