用CSS设计高体验的表单显示效果示例

2016-01-29 11:47 5 1 收藏

用CSS设计高体验的表单显示效果示例,用CSS设计高体验的表单显示效果示例

【 tulaoshi.com - Html 】

以下是引用片段:
<style type="text/css" 
.input1{ 
font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px; 

.input1-bor { 
font-family:verdana;background-color:#F0F8FF;font-size: 12px; 
border: 1px solid #333333;} 
</style 
<table cellspacing=2 cellpadding=0 width=300 border=0 
<tr 
<td<font class="en1"姓名:</font </td 
<td<input size=40 name=name class="input1" onblur="this.className=’input1’" onfocus="this.className=’input1-bor’" 
</td 
</tr 
<tr 
<td<font class="en1"邮箱:</font</td 
<td<input size=40 name=email class="input1" onblur="this.className=’input1’" onfocus="this.className=’input1-bor’"</td 
</tr 
<tr 
<td<font class="en1"网址:</font </td 
<td<input size=40 name=url class="input1" onblur="this.className=’input1’" onfocus="this.className=’input1-bor’" 
</td 
</tr 
<tr 
<td<font class="en1"主题:</font </td 
<td<input size=40 name=subject class="input1" onblur="this.className=’input1’" onfocus="this.className=’input1-bor’" 
</td 
</tr 
<tr 
<td<font class="en1"内容: </font </td 
<td<textarea name=message rows=5 cols=35 class="input1" onblur="this.className=’input1’" onfocus="this.className=’input1-bor’"</textarea</td</tr</table

来源:https://www.tulaoshi.com/n/20160129/1483318.html

延伸阅读
标签: Web开发
一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。 用css控制的语法如下: span style="cursor:*"文本或其它页面元素/span 把 * 换成如下15个效果的一种: hand、crosshair、text、wait、default、help、e-resize、ne-resize...
标签: Web开发
对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用fieldset/label标签制作漂亮而且具体亲和力的表单的方法。 基本的xhtml h3已注册用户登录/h3 form action="" method="post" name="apLogin" fieldset legend用户...
标签: Web开发
制作表单的时候,实现鼠标悬停交互效果有多种方法: 1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了。 ...
网上挤满了各种各样的UI设计方案,事实上我们已经有一套套的方案可遵循。但!设计永无止境!哪怕是一个注册表单,也值得再细心研究。下面给出注册表单设计5个小技巧: 1、别让用户重复填写相同的内容 几乎每个人都经历过这样一个事实:注册时被要求填写邮箱地址两次或重复输入密码。但是这其实是没有必要的。仅填写一次,因为用户一般都记得自...
table元素 如果你已经看过我的代码,就会发现我的日历是用table做的。不错,因为日历中显示的是表列数据,所以这样说来用table布局是合理的。而用table定位制作整个网站是不合适的,但我们完全可以有针对性的将table用在列表数据当中。像日历,程序表,图表,时间表我们都可以用table制作。此外试想一下,如果没有引用CSS,...

经验教程

29

收藏

49
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部