今天的demo主要涉及了以下幾個小知識點：

              1.使用label標籤來對input標籤進行文字提示以及對齊的方式；

              2.使用position定位元素的位置；

              3.使用css屬性中的display，使得inline元素變成inline-block，具備inline和block的特性，

                 讓inline可以設定寬度和高度。

        本demo的頁面結構程式碼：

        <div class="nav">導航連結部分</div>
	<div class="topic">
		<img src="img/jd_logo.png"/>
		<img src="img/welcome.png"/>
	</div>
	<form class="content" action="" method="post">
		<div class="reg">
			<label for="user_name"><span>*</span>使用者名稱：</label>
			<input type="text" id="user_name"/>
			<span>4-20位字母、數字、漢字及'-'、'_'組合</span>
		</div>
		<div class="reg">
			<label for="user_pwd"><span>*</span>密碼：</label>
			<input type="password" id="user_pwd"/>
			<span>6-20位字元，建議字母、數字和符號</span>
		</div>
		<div class="reg">
			<label for="user_pwded"><span>*</span>請確認密碼：</label>
			<input type="password" id="user_pwded"/>
			<span>請再次輸入密碼</span>
		</div>
		<div class="reg">
			<label for="user_phone"><span>*</span>驗證手機：</label>
			<input type="text" id="user_phone"/>
			<span>完成驗證後，可以使用該手機找回</span>
		</div>
		<div class="reg">
			<label for="user_sns"><span>*</span>簡訊驗證碼：</label>
			<input type="text" id="user_sns" style="width:110px;"/>
			<span>獲取簡訊驗證碼</span>
		</div>
		<div class="bottom">
			<input type="radio"/>我已同意並閱讀
			<a href="#">《京東使用者註冊協議》</a>
			<button></button>
		</div>
		<div class="right"></div>
	</form>
 

*{/*通用選擇器，清楚所有元素的margin和padding*/
		margin:0;
		padding:0;
	}
	body{background-color:#f2f2f2;font-size:12px;}
	.nav{/*導航欄部分*/
		height:25px;
		width:100%;
		background-color:#fafafa;
		position:fixed;
		border-bottom:1px solid #eee;
	}
	.topic,.content{
		width:842px;
		margin:0px auto;
	}
	.topic{
		padding-top:26px;
	}
	.topic img{
		margin-top:17px;
	}
	.content{/*表單區域的CSS樣式*/
		margin-top:39px;
		background-color:#fff;
		position:relative;
		padding:5px;
	}
	.content .right{
		width:180px;
		height:180px;
		background:url(img/reg_phone.jpg) no-repeat;
		position:absolute;
		top:34px;
		left:659px;
	}
	.reg{
		margin-top:27px;
	}
	.reg label{
		display:inline-block;
		width:157px;
		text-align:right;
	}
	.reg label span{
		color:red;
	}
	.reg input{
		border:1px solid #ccc;
		display:inline-block;
		width:228px;
		height:30px;
	}
	.reg>span{
		line-height:30px;
		border:1px solid #ddd;
		padding:10px 4px;
		background-color:#f7f7f7;
	}
	#user_name{
		background:url(img/user.jpg) no-repeat  210px center;
	}
	#user_pwd,#user_pwded{
		background:url(img/pwd.jpg) no-repeat  210px center;
	}
	#user_phone{
		background:url(img/phone.jpg) no-repeat  210px center;
	}
	.bottom{
		width:230px;
		margin:40px auto;
	}
	.bottom button{
		width:270px;
		height:36px;
		margin-top:39px;
		background:url(img/regist_btn.jpg) no-repeat;
	}
	.bottom button:hover{
		background:url(img/regist_btn_hove.jpg) no-repeat;
	}
	.bottom a{
		text-decoration:none;
	}