支付表单(web前端开发实践)

这我也是刚学没多久,这表单是老师发布的作业,哈哈哈,好东西要分享嘛~~~希望能有帮助!

<!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>

我相信,如上代码是可以简化的,嗨哟一些不妥的地方,自己也可以修改下哈

上一篇:用CSS border画一个铅笔


下一篇:网页标准化:CSS代码缩写精简实例