CSS+DIV实现的表单效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>demo</title> <style type="text/css"> body{ font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #666; } form{ margin: 0px; width: 450px; border: solid 1px #CCC; } .bo{ border-bottom: solid 1px #CCC; } label{ width: 50px; float: left; padding: 10px 0px 4px 15px; } input{ padding: 1px; } input,textarea{ border: 1px solid #CCC; margin: 5px 0px; } textarea{ padding: 2px; } .bt{ width: 38px; height: 20px; font-size: 11px; border: solid 1px #CCC; background: #FBFBFB; PHP程序员站--PHP程序员之家 text-align: center; } .btcenter{ text-align: center; clear: left; padding: 4px 0px 0px; } </style> </head> <body> <form action="#" method="post" name="myform" id="myform"> <input type="hidden" name="act" value="add" /> <div class="bo"> <label>标题:</label> <input type="text"size="20" maxlength="10" /> </div> <div class="bo"> <label>作者:</label> <input type="text" size="20" maxlength="16" /> </div> <div class="bo"> <label>来源:</label> <input type="text" size="30" maxlength="20" /> </div> <div class="bo"> <label>内容:</label> <textarea cols="40" rows="8"></textarea> www phperz com </div> <div class="btcenter"> <input type="submit" class="bt" value="Send" /> <input type="reset" class="bt" value="Reset" /> </div> </form> </body> </html>
|