当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 用CSS设计高体验的表单显示效果示例

HTML/XHTML教程
HTML教程:脚本JS标记script详解
后缀是.shtml的网页文件你知道是什么意思吗?
中文Web设计HTML的em标记使用
IE8开发人员工具的菜单讲解(2)
精确测量网页的软件:FastStone Capture
HTML教程:iframe标记常见的几种使用方法
图片IMG标记的alt属性和title属性
网页中的H1标记的使用注意事项
Webjx推荐下载Photoshop网页按钮源文件
如何把PSD文件制作成XHTML+CSS文件
ASP生成静态Html文件的技术总结
网站建设过程中常见的5个HTML错误
HTML列表标记:dl、dt、dd
网页布局方案:弹性流体布局
真正的离线Web要靠HTML 5
采用列表设计网页的9个好处
连续滚动的超级链接文字网页代码
24个漂亮的个性化HTML表单技术
怎样解决DIV层被Flash动画遮盖问题?
Safari 4浏览器的一些新特性

HTML/XHTML教程 中的 用CSS设计高体验的表单显示效果示例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 82 ::
收藏到网摘: n/a

以下是引用片段:
<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>