前端每日一小练2---京东注册页面（无JS验证）

       今天的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>        demo的CSS样式：
      *{/*通用选择器，清楚所有元素的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;
}

运行效果截图：