转载自：http://xiaocaochenfei.blog.sohu.com/40726860.html
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>fieldset,input:focus的应用</title><style>*{margin: 0;padding:0;}body {font: 12px Verdana, "Trebuchet MS", Geneva, sans-serif;line-height: 1.6em;color: #0C344D; background-color: #FFF;}fieldset{border: none;border-top: 1px solid #DA5BA4; width: 500px; margin-left: 30px;}legend{font-weight: bold;color: #124E74;}label {margin: 8px 0 0 8px;display: block;}input, textarea, select { margin: 4px 8px; padding: 2px 4px; border-top: none; border-bottom: 4px solid #7FBAE7; border-right: none; border-left: 1px solid #7FBAE7; color: #124E74; background: url(http://f.thec.cn/binglanzhixuan/CSS/images/marco_input.gif) top right no-repeat;}textarea { height: 140px; }input:focus, textarea:focus, select:focus { border-bottom: 4px solid #124E74; }#name { width: 220px; }#email { width: 220px; }#subject { width: 360px; }#text { width: 360px; height: 140px; }.check{background:none;border:none;}</style></head><body> <fieldset> <legend><img src="http://f.thec.cn/binglanzhixuan/CSS/images/tagemail.gif" alt="e-mail"></legend>
<label for="name">您的姓名：</label><input name="name" id="name" maxlength="40" value="" type="text"><br />
<label for="email">您的邮箱：</label><input name="email" id="email" maxlength="80" value="" type="text"><br />
<label for="text">给我留言：</label><textarea name="text" id="text" rows="8" cols="60"></textarea><br />
<label for="copymail" style="display: inline;">以后都用此姓名给我留言：</label><input name="copymail" id="copymail" value="copymail" class="check" type="checkbox">
<input class="botonimg" src="http://f.thec.cn/binglanzhixuan/CSS/images/bot_enviarmail.gif" value="enviar e-mail" title="Enviar e-mail" style="margin: 18px 0pt 0pt 8px;" alt="Enviar" type="image"> </fieldset></body></html>
