| 導購 | 订阅 | 在线投稿
分享
 
 
 

纯CSS表单显示效果

2008-08-19 06:51:02  編輯來源:互聯網  简体版  手機版  評論  字體: 小|中|大
 
　　<html>

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

　　<title>非常不错的纯CSS表单显示效果 - 站在巨人肩膀上</title>

　　<style type="text/css">

　　body{

　　font-family: verdana,font-size: 12px;color: #FFFFFF;background-color:#ffffff}

　　.en1 {

　　font-size: 10px;font-family: Verdana

　　}

　　.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>

　　<style type="text/css">

　　<!--

　　.en1 {font-size: 10px;font-family: Verdana

　　}

　　.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;

　　}

　　-->

　　</style>

　　</head>

　　<body>

　　<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'">
 
 
 
猜你喜欢
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>非常不错的纯CSS表单显示效果 - 站在巨人肩膀上</title> <style type="text/css"> body{ font-family: verdana,font-size: 12px;color: #FFFFFF;background-color:#ffffff} .en1 { font-size: 10px;font-family: Verdana } .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> <style type="text/css"> <!-- .en1 {font-size: 10px;font-family: Verdana } .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; } --> </style> </head> <body> <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'">
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
王朝网络微信公众号
微信扫码关注本站公众号 wangchaonetcn
 
　　免责声明：本文仅代表作者个人观点，与王朝网络无关。王朝网络登载此文出于传递更多信息之目的，并不意味著赞同其观点或证实其描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有