1. 程式人生 > >CSS -- 未解之疑

CSS -- 未解之疑

legend order 上傳 isp bold mail sub 標題 feed

@、css那些事兒 -- 第9章 反饋表單

自己編寫了CSS,可是紅框中的橫線比下面的要粗。對比作者的代碼,發現可能與上面標題h3的height和line-height有關,但是不知道具體是為什麽?

技術分享

技術分享
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name
="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> .feedback { width:500px; } .feedback * { margin:0; padding:0; font:normal 12px/1.5em "宋體", Verdana,Lucida, Arail, Helvetica,sans-serif
; } .feedback h3 { padding:1px 10px; font-weight:bold; color:#FFFFFF; background-color:#619FCF; } .feedback .content { padding:10px; } .feedback .content fieldset { margin-top:10px; padding:0 20px; border:0 none; border-top
:1px solid #999999; } .feedback .content label { float:left; width:100px; text-align:right; color:#AAAAAA; } .feedback .content .frm_cont { margin-top:10px; } .feedback .content .email input { width:200px; } .feedback .content .url input { width:300px; } .feedback .content .up_file input { width:300px; } .tips { margin-left:100px; } /* .btns { float:left; margin:0 auto; } */ </style> </head> <body> <div id="" class="feedback"> <h3>反饋表單</h3> <div id="" class="content"> <form method="post" action=""> <fieldset class="base_info"> <legend>用戶信息</legend> <div id="" class="frm_cont userName"> <label for="userName">用戶名:</label><input type="text" name="" id="userName" /> </div> <div id="" class="frm_cont email"> <label for="email">電子郵件:</label><input type="text" name="" id="email" value="@" /> </div> <div id="" class="frm_cont url"> <label for="url">網址:</label><input type="text" name="" id="url" value="http://*" /> </div> </fieldset> <fieldset class="feedback_content"> <legend>反饋內容</legend> <div id="" class="frm_cont up_file"> <label for="up_file">相關圖片:</label><input type="file" id="up_file" /> <p class="tips">本系統只支持上傳.jpg、.gif、.png圖片。</p> </div> <div id="" class="frm_cont msg"> <label for="msg">內容:</label><textarea name="" rows="4" cols="40" id="msg"></textarea> <p class="tips">請輸入留言內容!</p> </div> </fieldset> <div id="" class="btns"> <button type="submit">提交</button><button type="reset">重置</button> </div> </form> </div> </div> </body> </html>
View Code

CSS -- 未解之疑