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

HTML/XHTML教程
HTML表格标记教程(4):边框色属性BORDERCOLOR
HTML表格标记教程(1):制作表格
HTML表格标记教程(2):表格的边框属性BORDER
HTML教程,简单学习HTML语言(2)
HTML表格标记详细讲解(适合初学者)
网页制作解惑:图象文件的路径
HTML教程,简单学习HTML语言
HTML基础:HTML的基本结构
HTML教程,认识optgroup元素
网页输入框的样式触发效果
HTML教程,HTML默认样式
超链接打开目标(target)的测试
XHTML教程,简单认识XHTML基础知识
HTML表格标记教程(35):跨列属性COLSPAN
HTML表格标记教程(33):单元格的垂直对齐属性VALIGN
HTML表格标记教程(34):跨行属性ROWSPAN
HTML表格标记教程(31):单元格的宽度和高度属性WIDTH、HEIGHT
HTML表格标记教程(32):单元格的水平对齐属性ALIGN
HTML表格标记教程(30):单元格的暗边框色属性BORDERCOLORDARK
HTML表格标记教程(28):单元格的边框色属性BORDERCOLOR

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


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