<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
form {
width: 500px;
background-color:goldenrod;
border-radius: 10px;
}
.items{
width: 120px;
display:inline-block;
}
.steps{
height: 50px;
line-height: 50px;
}
.step {
height: 50px;
background-color:whitesmoke;
line-height: 50px;//行高达到垂直居中效果
}
.sub{
height: 50px;
text-align: center;
line-height: 50px;
}
.sub input {
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<div>
<form action="https://www.baidu.com/?tn=57095150_2_dg">
<div>
<p class="steps">第一步，详细信息</p>
<p class="step">
<span class="items">姓名</span>
<input type="text" name="name" />
</p>
<p class="step">
<span class="items">电话</span>
<input type="number" name="phoneNumber" />
</p>
<p class="step">
<span class="items">facebook主页</span>
<input type="url" name="facebook" />
</p>
</div>
<div>
<p class="steps">第二步，收货地址</p>
<p class="step">
<span class="items">详细地址</span>
<input type="text" name="area" />
</p>
<p class="step">
<span class="items">邮编</span>
<input type="email" name="email"/>
</p>
</div>
<div>
<p class="steps">第三步，银行卡信息</p>
<p class="step">
<span class="items">银行卡类型</span>
<input type="radio" name="cardType"/>借记卡
<input type="radio" name="cardType"/>信用卡
</p>
<p class="step">
<span class="items">卡号</span>
<input type="number" name="cardId"/>
</p>
<p class="step">
<span class="items">持卡人姓名</span>
<input type="text" name="cardName"/>
</p>
</div>
<div class="sub">
<input type="submit" value="提交" />
</div>
</form>
</div>
</body>
</html>
6338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
