@、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>
时间： 2025-01-05 14:33:53