- 浏览: 241414 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
sweed0:
为何每一段代码都重复一次呢?
spring注解实例二 -
Gary_Huangpf:
- - 插件报错啊
Ext前台分页 -
ddvk2007:
版主 我想請問你所說的mapreduce是hadoop的還是g ...
MapReduce中的Shuffle和Sort分析 -
人可木:
好问章,楼主写的相当详细。。。多谢。。。
findbugs插件的安装与应用 -
hautbbs:
按照博主的方法启动调试出现jvm terminated.Ex ...
10分钟学会使用MyEclipse断点调试js
1.1 字体样式的应用
字体样式包括:字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font),具体的定义方法,在这里不详细讲述,可以参考它的资料。
也许你已经注意到,按钮上的文字不漂亮,其实可以通过CSS字体样式来解决,同样地,其它的几个涉及到文字的表单项,例如,文本框、多行文本框、口令框、下拉选择框都可以应用字体样式。
为了充分展示这些应用,下例特别设计了几种样式,在实际应用中,不必这么凌乱,灵活运用:
HTML代码
小结:只要我们对字体的样式熟悉了,就可以灵活多变,不一定要在标签里面使用style来定义,完全可以在<head>里定义,或者外部引用CSS文件,用到的时候引用一下就能达到预期的效果。
1.2 背景颜色和图像样式的应用
有很多时候,网页由于颜色的搭配,不得不对表单的背景颜色和图像样式进行设计,背景颜色利用background-color属性,背景图像利用background-image属性,颜色和图像同样能够得到意想不到的效果。
样例2: 表单元素的背景展示
小结:用好background-color属性和background-image属性,就可以设计很出“色”表单了。
1.3 边框样式的应用
也许你觉得表单的边框过于死板,我们能否设计单线条,或者其它的边框样式呢?当然可以!
和边框有关的属性有:边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-colr、边框宽度 border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框 border,这里不作详细的讲述,请参考有关资料。
样例3: 8种边框形式的展示
文本框有8种类型边框样式,即border-style,分别展示在本例中,边框宽度的设置有一个规律:
border-width: [ thin | medium | thick | <长度> ]{1,4}
边框宽度用一到四个值来设置元素的边框宽度,它们分别被应用于上、右、下和左边框宽度。如果只给出一个值,它被应用于所有边框宽度。如果两个或三个值给出了,省略了的值与对边相等
例如:
程序代码
<input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px">
边框颜色的设置有一个规律:border-colr: <颜色>{1,4}
边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了,它们分别被应用于上、右、下和左边框颜色。如果只给出一个值,它被应用于所有边框颜色。如果两个或三个值给出了,省略了的值与对边相等。
对于多行文本框以及按钮,设置边框的方法和文本框一样,不再陈述;
由于下拉选择框select不支持边框的设置,所以对它设置是徒劳的;
单选按钮和复选按钮的边框,设置的效果不十分协调,所以建议不要对它们设置,不然有“画蛇添足”之感。
样例4:边框的特殊设计展示
聪明的读者一定会想到,如果设计单边框,一定更加漂亮,对!下面我们来尝试以下部分边框的设置效果,本例仅仅以Solid和dotted两种类型的边框作演示,其它类型的边框原理相同:
注意--边框类型的外观如下:
none :无边框。与任何指定的border-width值无关;
dotted :点线;
dashed :虚线;
solid :实线边框;
double :双线边框。两条单线与其间隔的和等于指定的border-width值;
groove :3D凹槽;
ridge :边框突起;
inset :3D凹边;
outset :3D凸边
2、图像魔法
图像,是网页的重要元素,能否应用到表单中呢?接下来,我们用图像来改造死板的表单,分两个部分来探讨:用图像代替按钮、用背景图美化表单元素。
2.1 用图像代替按钮
由于默认的表单按钮太丑陋,绝大多数的网站采用了图像按钮,那么,我们通过两个实例来看看怎样实现的:
样例5:用图像代替提交按钮:
当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是:
<input type="image" name="..." src="url" width="" height="..." border="...">
除了标签改为input type="image"以外,其它的属性和 <img> 标签的属性是一样的,例如:
是不是只要用图片就可以代替所有的按钮呢?是的,不过,不是上面这么简单了,必须加上事件函数,不然的话,图片都是提交按钮,不能完成复位等功能,看看下面的例子就知道了:
注意:
代替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没有效果以外,其它的都可以配合网页的背景来设置它们。
样例6:背景图的设置
发表评论
-
js原型
2012-07-26 09:12 847原型是个很微妙的东西,很多人不是很理解,理解了原型对于研究 ... -
一个基于jquery的banner轮播
2012-03-21 10:21 1365一个banner轮播广告。 JavaSc ... -
jquery要怎么写才能速度最快?(转)
2012-03-21 09:52 893很久没有关注jQuery了,最近重新看了一下,看到一些不错 ... -
HTTP协议详解(转载)
2012-02-18 19:17 0什么是HTTP协议 协议是指计算机通信网络中两台计算机 ... -
JavaScript 数组常用操作
2011-10-09 15:43 12281.创建数组只是声明了数组,并不包含具体数据。 Jav ... -
不同浏览器的Javascript兼容性总结
2011-08-20 12:56 2720对于大多数程序员而言在平时的编码过程中很少会注意到跨浏 ... -
javascript字符串编码
2011-07-18 15:05 820encodeURI() 函数可把字符串作为 URI 进行编 ... -
js最全的10种跨域解决方案
2011-07-15 09:08 841在客户端编程语言中,如javascript和Action ... -
js内置函数速查
2011-07-15 09:07 14961.document.write("" ... -
javascript优化
2011-07-15 08:55 790javaScript是一门解释性的语言、它不像java、C ... -
Ajax乱码
2011-05-14 14:09 1003使用GET方式提交数据的时候,中文问题很好解决,setRequ ... -
Ext实现添删查改二
2010-04-29 12:50 1134上一篇中提到了列表显示、增加、删除。这篇说下修改和条件查询。 ... -
Ext实现添删查改一
2010-04-29 12:48 1363前台: var sm = new Ext.grid.Chec ... -
Ext前台分页
2010-04-29 12:46 2065今天上午测试并实现了Ext的前台分页,参考了网上的资料,使用了 ... -
firebug的使用
2010-02-05 13:21 889什么是Firebug 从事了数 ... -
Ext学习资料大全
2010-02-04 08:47 1229轻松搞定 ExtJS http://download.csdn ... -
FireBug的安装与调试js快速入门
2010-02-03 19:47 3531Javascript的调试,是开 ... -
10分钟学会使用MyEclipse断点调试js
2010-02-03 10:11 4680最近老是被js代码所困扰,故撰此文: 1.在站点下准备 ...
相关推荐
html5便签贴,可以加入链接,点击放大
HTML5Sticky是一个HTML5应用,用于创建一个基于Web的便签。它使用了HTML5的本地存储和CSS3等技术来创建便签。这意味着,创建的便签可以被持久化保存。经测试支持的浏览器包括:Chrome, Firefox 3.5 , Safari 4 , ...
HTML5+CSS3五步实现便签效果,包含倾斜和动画特效
【vivo便签】vivo手机的便签如何搬移到华为或其他手机上呢? 用Vivo便签合成器 必须在note文件夹旁边 新建一个文件夹,而且必须叫“notes”,否则程序会出错。 双击exe文件以后,很快程序就会运行。 notes文件夹里就...
3、增加便签另存为txt、html、rtf、docx格式 4、增加新建便签可直接创建指定标签的便签 5、修改待办事项进度由百分比改为分数形式 6、修改便签默认不带阴影 7、修复联系人电话不可复制粘贴bug 8、修复创建...
web 便签,可随便移动,可随处贴。纯JS+html,可用于多种语言
html5制作的便签墙
本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面
相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个...今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。 转自:素材火jQuery教程演示:http://www.sucaihuo.com/js/70.html
本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:(注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!)注:该效果可以在Safari,Chrome,Firefox和...
html5 CSS3实现类似小米手机的便笺效果,CSS3桌面便签效果,鼠标悬停放大显示,用过小米手机的会熟悉本效果,挺美观的文字布局方式。
便签,想必大家对这个词汇并不会陌生吧,下文有个不错的示例可以通过html5实现便签特效,喜欢的朋友可以了解下
主要介绍了Nodejs抓取html页面内容的关键代码,另外还给大家附上了nodejs抓取网页内容,非常不错,对node.js抓取页面内容感兴趣的朋友一起学习吧
更新历史:版本:4.301、增加针对“待办事项”上下位置调整功能2、增加新建便签时可插入星期选项3、增加便签另存为txt、html、rtf、docx格式4、增加新建便签可直接创建指定标签的便签5、修改待办事项进度由百分比改...
本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:(注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!)注:该效果可以在Safari, Chrome,Firefox和...
剑儿音速启动便签软件,大家应该从标题都能知道这款软件是用来做什么的吧. 大明顶顶的音速启动,是用来管理桌面程序的.本程序提供了一样的功能. 网址收藏.让你在工作中更容易打开想要的网站. 便签软件是将你要做的重要...
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签页</title> <link rel='stylesheet' href=...
python现在火热的程度相信不用过多介绍了,下面这篇文章主要给大家介绍了关于利用Python如何生成便签图片的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需要的朋友...