标签：web border 1em 表单 width input margin 前端开发
这我也是刚学没多久，这表单是老师发布的作业，哈哈哈，好东西要分享嘛~~~希望能有帮助！
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8">
<title>支付表单</title>
<style type="text/css">
form{
margin:50 auto;
width: 400px;
padding: 1em;
border: 1px solid #000000;
border-radius: 1em;
}
form div + div{
margin-top: 1em;
}
label{
display: inline-block;
width: 130px;
text-align: right;
}
input, textarea{
font: 1em sans-serif;
border: 1px solid #999;
}
input{
width: 260px;
}
.input{
width: 10px;
}
input: focus,textarea: focus{
border-color: #000;
}
textarea{
vertical-align: top;
height: 4em;
}
.button{
padding-left: .5em;
padding-right: .5em;
margin-left:100px;
margin-top:5px
}
fieldset{
margin-left: 120px;
}
</style>
</head>
<body>
<form>
<h1>支付表单</h1>
<h4>必填字段 *.</h4>
<section>
<h2>联系人信息</h2>
<fieldset >
<legend>标题</legend>
<dl>
<dt>
<input type="radio" class="input" name="sex" value="先生" checked="checked"/>先生
</dt>
<dt>
<input type="radio" class="input" name="sex" value="女士"/>女士
</dt>
</dl>
</fieldset>
<dl>
<dt style="height: 40px">
<label for="name">姓名：*</label>
<input type="text" id="name" name="name"/>
</dt>
<dt style="height: 40px">
<label for="mail">E-mail：*</label>
<input type="text" id="mail" name="name"/>
</dt>
<dt style="height: 40px">
<label for="password">密码：*</label>
<input type="text" id="password" name="name"/>
</dt>
</dl>
</section>
<section>
<h2>支付信息</h2>
<dl>
<dt style="height: 40px">
<label for="visa">卡类型：</label>
<select name="Visa" id="visa">
<option value="" selected="selected">Visa</option>
<option value="1">建设银行</option>
<option value="2">储蓄银行</option>
<option value="3">工商银行</option>
<option value="4">农业银行</option>
</select>
</dt>
<dt style="height: 40px">
<label for="card-number">卡号：*</label>
<input type="text" id="card-number" />
</dt>
<dt style="height: 40px">
<label for="card-deadline">卡有效日期：*</label>
<input type="text" id="card-deadline" />
</dt>
<dt style="height: 40px">
<em>输入格式 月/年</em>
</dt>
<dt>
<button class="button" type="submit" formaction="http//www.baidu.com" formmethod="post">确认支付</button>
</dt>
</dl>
</section>
</form>
</body>
</html>我相信，如上代码是可以简化的，嗨哟一些不妥的地方，自己也可以修改下哈
标签：web,border,1em,表单,width,input,margin,前端开发 来源： https://blog.csdn.net/qq_56715530/article/details/120624309
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。