2012/10/5 18:06:51作者:佚名来源:网络
相信大家都知道,在设计网页的时候不免都会用到表单,那么表单的样式你们知道多少呢?今天学无忧通过整理,搜集成表单样式大全,让大家在设计网页的时候得心应手,下面学无忧小编将详细给大家讲解表单样式大全的具体内容:
表单样式大全一、CSS魔法
层叠样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
1、字体样式的应用
字体样式包括:字体(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font)。可以利用字体样式设置按钮的文字、文本框、多行文本框、口令框、下拉文本框。
例子:表单元素的字体样式展示
文本框里的文字是加粗的,大小是9pt,字体是宋体<br> <input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋体; font-size: 12px; font-weight: bold" value="加粗"> <br>口令框文字是红色的<br> <input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"> <br>下拉框文字颜色是红色的,字体是Verdana,大小是9pt<br> <select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"> <option value="2" selected>yesky.com</option> <option value="1">redidea.net</option> </select> <br>多行文本框了的字体是Verdana,有下划线,大小是9pt<br> <br>发送1和发送2按钮的文字不同,是因为发送1按钮使用了9pt的宋体文字,所以比较美观<br> <input type="submit" name="Submit" value="发送1" style="font-family:宋体; font-size:9pt;"> <input type="submit" name="Submit" value="发送2" ><br> <textarea name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right>
2、背景颜色和图像样式的应用
背景颜色利用background-color属性,背景图像利用background-image属性。
例子:表单元素的背景展示
文本框背景是黑色的,字体是白色的<br> <input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"> <br>口令框背景是灰色的<br> <input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"> <br>单选和复选按钮的背景是红色的<br> <input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"> <input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"> <br>下拉选择框的选项是丰富多彩的背景<br> <select name="select2" size="1"> <option selected style="background-color: #FF0000">yesky.com</option> <option style="background-color: #0000CC">xue51.com</option> <option style="background-color: #009900">www.xue51.com</option> <option style="background-color: #ff33cc">sina.com</option> <option style="background-color: #999999">sohu.com</option> </select> <br>多行文本框的背景是一个图像 <br>submit1按钮的背景是黄色的<br> <input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"> <br>submit2按钮的背景是一个图像<br> <input type="submit" name="Submit22" value="Submit2" style="background-image: url(学无忧.gif)"><br> <textarea name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(学无忧.gif)">
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。
例子:8种边框样式的展示
<input style="border-right: #006600 1px dotted; border-top: #006600 1px dotted; border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" size=10 value=dotted name=RedF> <input style="border-right:3px dashed; border-top:1px dashed; border-left:3px dashed; border-bottom: 1px dashed" size=10 value=dashed name=RedF2> <input style="border-right:3px double; border-top:3px double; border-left:3px double; border-bottom: 3px double" size=10 value=double name=RedF3> <input style="border-right: 2px groove; border-top:2px groove; border-left:2px groove; border-bottom: 2px groove" size=10 value=groove name=RedF4> <br> <input style="border-right: 3px inset; border-top: 3px inset; border-left:3px inset; border-bottom: 3px inset" size=10 value=inset name=RedF5> <input style="border-right:2px outset; border-top:2px outset; border-left:2px outset; border-bottom: 2px outset" size=10 value=outset name=RedF6> <input style="border-right:3px ridge; border-top:3px ridge; border-left:3px ridge; border-bottom: 3px ridge" size=10 value=ridge name=RedF7> <input style="border-right:1px solid; border-top:1px solid; border-left:1px solid; border-bottom: 1px solid" size=10 value=solid name=RedF8> <br> <input style="border-right:#006600 1px dotted; border-top:#006600 1px dotted; border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" type=checkbox value=checkbox name=checkbox2> 复选 <input style="border-right: #006600 1px dotted; border-top: #006600 1px dotted; border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" type=radio value=radiobutton name=radiobutton> 单选 <input style="border-right:3px double; border-top:3px double; border-left:3px double; border-bottom: 3px double" type=submit value=发送 name=Submit4> <input style="border-right:3px dashed; border-top:1px dashed; border-left:3px dashed; border-bottom: 1px dashed" type=submit value=取消 name=Submit23> <br> <textarea style="border-right: #006600 1px dotted; border-top: #006600 1px dotted; border-left: #006600 1px dotted; border-bottom: #006600 1px dotted" name=RedF9 rows=3 wrap=VIRTUAL cols=30>
4、边框特殊设计应用
利用边框颜色:border-color、边框类型border-style设置。
例子:边框特殊设计展示
<input style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value=文本框:只有下边框 name=myRed> <input style="BORDER-RIGHT: #000099 0px solid; BORDER-TOP: #000099 0px solid; BORDER-LEFT: #000099 0px solid; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #ffffff" type=button value=按钮1 name=Button><br><br> <input style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value=文本框:上下边框颜色不同 name=myRed2> <input style="BORDER-RIGHT: black 0px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff" type=button value=按钮2 name=Submit24><br><br> <input style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" size=25 value=文本框:边框、颜色不同 name=myRed3> <input style="BORDER-RIGHT: #ff0000 1px dotted; BORDER-TOP: #ff0000 1px dotted; BORDER-LEFT: #ff0000 1px dotted; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff" type=button value=按钮3 name=Submit32>
注意:
边框类型的外框如下:none:无边框。与任何指定的border-width值无关;dotted:点线;dashed:虚线;solid:实线边框;double:双线边框。两条单线与其间隔的和等于指定的border-width值;groove:3D凹槽;ridge:边框突起;inset:3D凹边;outset:3D凸边。
表单样式大全二、图像魔法
1、用图像代替按钮
<input type="image" name="..." src="url" width="" height="..." border="...">
例子:用图像代替按钮
<input type=image height=19 width=53 src="学无忧.gif" align=absMiddle border=0 name=imageField>
是不是只要用图片就可以代替所有的按钮呢?是的,不过,不是上面这么简单了,必须加上事件函数,不然的话,图片都是提交按钮,不能完成复位等功能,看看下面的例子就知道了:
<input onclick=this.form.submit() type=image height=19 width=53 src="学无忧.gif" align=absMiddle border=0 name=RedImg> <input onclick=this.form.reset() type=image height=19 width=53 src="学无忧.gif" align=absMiddle border=0 name=RedImg3>
注意:
代替submit按钮的图片代码格式是:
<input type="image" name="..." src="..." onClick="document.formName.submit()">
代替reset按钮的代码图片格式是:
<input type="image" name="..." src="..." onClick="document.formName.reset()">
注:这里的formName是表单的name属性值。
2、用背景图片美化表单元素
利用背景图片:background-image:url()
例子:背景图片美化效果展示
<input style="background-image: url(学无忧.gif)" name=RedBack> <input style="background-image: url(学无忧.gif)" type=checkbox value=checkbox name=checkbox3> <input style="background-image: url(学无忧.gif)" type=radio value=radiobutton name=radiobutton> <select style="background-image: url(学无忧.gif)" size=1 name=select3> <option selected>www.xue51.com</option> <option>xue51.com</option> <option>www.xue51.com</option> </select> <br> <input style="background-image: url(学无忧.gif)" type=submit value=Submit name=Submit5> <input style="background-image: url(学无忧.gif)" type=reset value=Reset name=Submit25> <br> <textarea style="background-image: url(学无忧.gif)" name=RedBacka rows=3 wrap=VIRTUAL>
推荐阅读:网页特效:5款经典用于网站导航的下拉菜单
以上就是有关表单样式大全的相关内容,希望对大家有所帮助!
标签: 样式 表单
相关文章
ip雷达 v5.0.2绿色版
详情WinSCPv5.15.1绿色中文版
详情filezilla client v5.5
详情wireshark中文版 v3.4.9
详情Boson Netsimv10.8破解版
详情风行播放器 v3.0.6.106
详情爱奇艺客户端 v10.1.0.6636官方版
详情搜狐影音 v7.0.19.0官方版
详情乐视视频 v7.3.2.192
详情华数tv客户端PC版 v1.1.2.0
详情cbox央视影音 v5.1.2.1经典版
详情软媒收音机(魔方) v1.13
详情倾听网络收音机 v3.0.0.0
详情魅影流声全球网络收音机 v1.0.0.1
详情酷狗电台 v8.2.75
详情暴龙网络收音机 v2.5.1
详情克莉2v1.0中文版
详情冬日计划v1.2中文版
详情刺客信条英灵殿v1.0吾爱破解版
详情刺客信条英灵殿终极v1.0免安装破解版
详情动物森友会v1.10.0最新破解版
详情哈迪斯杀出地狱v1.37中文破解版
详情嗜血印中文豪华版v1.0豪华版破解版 附游戏攻略秘籍
详情城市战斗v1.0中文破解版
详情尼尔人工生命v1.0steam免费破解版
详情尼尔人工生命升级版v1.0PC破解版
详情尼尔人工生命升级版v1.2247中文破解版
详情层层恐惧2中文破解版v1.0绿色免安装版
详情往日不再v1.0 steam破解版
详情往日不再v1.0pc破解版
详情救赎之路v1.0中文破解版
详情斯盖尔女仆v1.0中文破解版
详情新盗墓笔记官方版v1.215.589730
详情无尽的拉格朗日无限金币钻石版v1.2.267172破解版
详情明日之后无限小太阳版v1.0.246安卓版
详情双生幻想vivo版v6.6.83安卓版
详情剑网1归来内购免费版v1.1.116安卓版
详情模拟城市我是市长国际版v0.69.21342.22832安卓版
详情迷你世界999999迷你币版v1.20.5破解版
详情王牌战争无限内购版v9.7安卓版
详情云上城之歌不氪金版v10.16安卓版
详情王铲铲的致富之路破解版v1.1.8安卓版
详情创造与魔法无限点券版v1.0.0505安卓版
详情狩猎使命九游版v1.6.6.000
详情魔镜物语变态版v2.1.4无限金币版
详情黑月手游免费版v2.2.0安卓版
详情曙光英雄v1.0.12.0.20无限钻石版
详情原始传奇无限元宝版v1.6.806内购破解版
详情