HTML&CSS实现简易注册信息表

前言

学习WEB前端第五天了，做一下小小的总结，
废话在后边上代码！

---

---

一、CSS代码

代码如下：

<style>
			*{
				margin: 0;
				padding: 0;
			}
			form{
				width: 400px;
				background-color: gainsboro;
				margin-left: auto;
				margin-right: auto;
				color: black;
				border-radius: 5px;
			}
			.form_step{
				font-size: 14px;
				font-weight: bold;
				margin: 0 10px;
			}
			.form_input{
				border-radius: 5px;
				border-color: grey;
				border-width: 2px;
				border-style: solid;
				padding: 3px;
				margin: 3px 0;
				background-color: ghostwhite;
				font-size: 12px;
				padding-left: 10px;
				position: relative;
			}
			span{
				display: inline-block;
				width: 110px;
			}
			input{
				background: #FFFFFF;
				border: none;
				height: 20px;
				border-radius: 3px;
				width: 180px;
			}
			input[type=radio]{
				width: 25px;
				height: 12px;
			}
			textarea{
				width: 180px;
				height: 70px;
				vertical-align: top;
				border: none;
				border-radius: 3px;
			} 
			.sbutton,.rbutton{
				border: none;
				background: grey;
				color:white;
				display: block;
				width: 100px;
				border-radius: 20px;
				margin: 8px 75px;
			}
			.rbutton{
				position: absolute;
				left: 140px;
				top: 3px;
			}
		</style>

二、HTML代码

代码如下：

<form action="">
			<section>
				<p class="form_step">第一步，详细信息</p>
				<p class="form_input">
					<span>姓名:</span>
					<input type="text" placeholder="请输入姓名" />
				</p>
				<p class="form_input">
					<span>电话:</span>
					<input type="text" placeholder="请输入电话" />
				</p><p class="form_input">
					<span>性别：</span>
					<input type="radio" name="caype" />男
					<input type="radio" name="caype" />女
				</p>
				<p class="form_input">
					<span>个人简介:</span>
					<input type="text" placeholder="随便说点啥..."/>
				</p>
			</section>
			<section>
				<p class="form_step">第二步，收获地址</p>
				<p class="form_input">
					<span>详细地址:</span>
					<textarea placeholder="..."></textarea>
				</p>
				<p class="form_input">
					<span>邮编:</span>
					<input type="text" />
				</p>
			</section>
			<section>
				<p class="form_step">第三步，银行卡信息</p>
				<p class="form_input">
					<span>银行卡类型</span>
					<input type="radio" name="card" />借记卡
					<input type="radio" name="card" />vsa卡
					<input type="radio" name="card" />信用卡
				</p>
				<p class="form_input">
					<span>卡&nbsp;&nbsp;号:</span>
					<input type="number" />
				</p>
				<p class="form_input">
					<span>密&nbsp;&nbsp;码：</span>
					<input type="password" />
				</p>
				<p class="form_input">
					<span>持卡人:</span>
					<input type="text" />
				</p>
				<p class="form_input">
					<input type="submit" class="sbutton" value="提交" />
					<input type="reset" class="rbutton" value="重置" />
				</p>
			</section>
		</form>

三、界面展示

最后一块儿的 提交 和 重置 按钮不是用的button标签（还没学），用的是input标签，写代码时对于怎么让它们两个并排比较困惑，最后想到了用定位的方式，但肯定还有别的方法，希望以后能学到。
果然写代码费脑子。。。

---

总结

虽然学了短短五天，但我已经被深深吸引，对于网页的编写也有了基本了解，目前学的还尚浅只能写一些表单，这个简易注册信息表就是总结现阶段把握情况，日积月累总会写出看得过去的网站。