表单验证设计

1、先设计个父盒子，设置宽高，进行margin:0 auto居中

2、在父盒子设计表单，由于都是比较整齐的采用ul>li

3、在li中采用label+input+span

label中的文字一般需要右对齐，label为行内元素，所以需要将label先转换为inline-block,并设置宽度，然后采用文本右对齐

<li>
    <label for=''>手机号：</label>
    <input type= 'text'>
    <span class= 'error'><i class= 'error_icon'></i>手机号格式不正确</span>
</li>

label{
    display:inline-block;
    width:80px;
    text-align:right;
}

对于行内块元素进行垂直居中，采用vertical-align:middle;（对于span中有图标和文本的，需要对i标签进行行内块转行后，对后面文本进行对齐时）

.error_icon{
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    background:url(../images/error.png) no-repeat;
}