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

HTML/XHTML教程
使用Web标准建站第5天:head区的其他设置
使用Web标准建站第4天:调用样式表
使用Web标准建站第3天:定义语言编码
使用Web标准建站第2天:什么是名字空间
使用Web标准建站第1天:选择什么样的DOCTYPE
使用Web标准建站第12天:校验及常见错误
使用Web标准建站第11天:不用表格的菜单
使用Web标准建站第10天:自适应高度
实现网页渐入特殊效果
实现网页的动态过渡效果
让网页里的提交按钮变得更靓丽
让浏览者记住你的主页
批量消除超链接虚线框
精彩网页九“慎”
解析HTML的增强标记
简单实用的网页表格特效
几个对图形进行动态处理的dhtml代码
基于Web标准的UI组件 — 菜单(1)
关于iframe的透明背景
shtml网页SSI使用详解

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 50 ::
收藏到网摘: 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>