1.只有下边框的文本框和像文字的按钮
效果图:
View Code
<html> <head> <title>像文字一样的按钮</title> <style> <!-- body{ background-color:#daeeff; /* 页面背景色 */ } form{ margin:0px; padding:0px; font:14px; } input{ font:14px Arial; } .txt{ border-bottom:1px solid #005aa7; /* 下划线效果 */ color:#005aa7; border-top:0px; border-left:0px; border-right:0px; background-color:transparent; /* 背景色透明 */ } .btn{ background-color:transparent; /* 背景色透明 */ border:0px; /* 边框取消 */ } --> </style> </head> <body> <form method="post"> 请输入您的信息: <input type="text" name="name" id="name" class="txt"> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"> </form> </body> </html>
2.七彩的下拉菜单
效果图:
View Code
<html> <head> <title>七彩的下拉菜单</title> <style> <!-- .blue{ background-color:#7598FB; color: #000000; } .red{ background-color:#E20A0A; color: #ffffff; } .green{ background-color:#3CB371; color: #ffffff; } .yellow{ background-color:#FFFF6F; color: #000000; } .cyan{ background-color:00FFFF; color:#000000; } .purple{ background-color:800080; color:#FFFFFF; } --> </style> </head> <body> <form method="post"> <p><label for="color">Select your favorite color:</label> <select name="color" id="color"> <option value="">Select One</option> <option value="blue" class="blue">blue</option> <option value="red" class="red">red</option> <option value="green" class="green">green</option> <option value="yellow" class="yellow">yellow</option> <option value="cyan" class="cyan">cyan</option> <option value="purple" class="purple">purple</option> </select></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p> </form> </body> </html>
3.直接输入的Excel表格
效果图:
View Code
<html> <head> <title>直接输入的Excel表格</title> <style> <!-- table.formdata{ border:1px solid #5F6F7E; border-collapse:collapse; font-family:Arial; } table.formdata caption{ text-align:left; padding-bottom:6px; } table.formdata th{ border:1px solid #5F6F7E; background-color:#E2E2E2; color:#000000px; text-align:left; font-weight:normal; padding:2px 8px 2px 6px; margin:0px; } table.formdata td{ margin:0px; padding:0px; border:1px solid #ABABAB; /* 单元格边框 */ } table.formdata input{ width:100px; padding:1px 3px 1px 3px; margin:0px; border:none; /* 输入框不要边框 */ font-family:Arial; } .btn{ border:1px solid #0083f2; font-family:Arial; } --> </style> </head> <body> <form method="post"> <table class="formdata"> <caption>公司销售统计表 2004～2007</caption> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">硬盘(Hard Disk)</th> <td><input type="text" name="harddisk2004" id="harddisk2004"></td> <td><input type="text" name="harddisk2005" id="harddisk2005"></td> <td><input type="text" name="harddisk2006" id="harddisk2006"></td> <td><input type="text" name="harddisk2007" id="harddisk2007"></td> </tr> <tr> <th scope="row">主板(Mainboard)</th> <td><input type="text" name="mainboard2004" id="mainboard2004"></td> <td><input type="text" name="mainboard2005" id="mainboard2005"></td> <td><input type="text" name="mainboard2006" id="mainboard2006"></td> <td><input type="text" name="mainboard2007" id="mainboard2007"></td> </tr> <tr> <th scope="row">内存条(Memory Disk)</th> <td><input type="text" name="memory2004" id="memory2004"></td> <td><input type="text" name="memory2005" id="memory2005"></td> <td><input type="text" name="memory2006" id="memory2006"></td> <td><input type="text" name="memory2007" id="memory2007"></td> </tr> <tr> <th scope="row">机箱(Case)</th> <td><input type="text" name="case2004" id="case2004"></td> <td><input type="text" name="case2005" id="case2005"></td> <td><input type="text" name="case2006" id="case2006"></td> <td><input type="text" name="case2007" id="case2007"></td> </tr> <tr> <th scope="row">电源(Power)</th> <td><input type="text" name="power2004" id="power2004"></td> <td><input type="text" name="power2005" id="power2005"></td> <td><input type="text" name="power2006" id="power2006"></td> <td><input type="text" name="power2007" id="power2007"></td> </tr> <tr> <th scope="row">CPU风扇(CPU Fan)</th> <td><input type="text" name="cpufan2004" id="cpufan2004"></td> <td><input type="text" name="cpufan2005" id="cpufan2005"></td> <td><input type="text" name="cpufan2006" id="cpufan2006"></td> <td><input type="text" name="cpufan2007" id="cpufan2007"></td> </tr> <tr> <th scope="row">总计(Total)</th> <td><input type="text" name="total2004" id="total2004"></td> <td><input type="text" name="total2005" id="total2005"></td> <td><input type="text" name="total2006" id="total2006"></td> <td><input type="text" name="total2007" id="total2007"></td> </tr> </table> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"> <input type="reset" value="Reset All" class="btn"></p> </form> </body> </html>
4.热点调查
效果图:
View Code
<html> <head> <title>Sina调查问卷</title> <style> <!-- table.outside{ /* 外层表格 */ background:url(bg1.jpg); font-size:12px; padding:0px; } td.title{ /* 表格标题 */ color:#FFFFFF; font-weight:bold; text-align:center; padding-top:3px; padding-bottom:0px; } td.tdoutside{ padding:0px 1px 4px 1px; } table.inside{ /* 内层表格 */ width:269px; font-size:12px; padding:0px; margin:0px; } td.tdinside{ padding:7px 0px 7px 10px; background-color:#FFD455; } form{ margin:0px; padding:0px; } input{ font-size:12px; } a{ color:#000000; text-decoration:underline; } --> </style> </head> <body> <table class="outside"> <tr><td class="title">热点调查</td></tr> <tr><td class="tdoutside"> <form method="post"> <table class="inside" cellspacing="0"> <tr> <td class="tdinside"> 中非黄岩岛,中日钓鱼岛.中国胜率多少<br> <input type="radio" name="q_498" value="2749">超过90％<br> <input type="radio" name="q_498" value="2750">50％到90％<br> <input type="radio" name="q_498" value="2751">40％到50％<br> <input type="radio" name="q_498" value="2752">40％到50％<br> <input type="radio" name="q_498" value="2753">30％以下<br> <input type="submit" value="提交"> <input type="button" name="viewresult" value="查看"> <a href="#">更新军事新闻</a> </td> </tr> </table> </form> </td></tr> </table> </body> </html>