實現效果：

html程式碼：

<div class="login">
    <form action="*跳轉介面*" method="post" onsubmit="return checkForm()">
      <div class="mt30"> <span>輸入手機號碼</span>
        <div class="input-wrap">
          <input type="text" name="phone" maxlength="11" id="mobile" />
        </div
 
>
      </div>
      <div class="mt30">
        <span>設定登入密碼</span> <a class="switch"><img src="img/eye.png" class="eye" id="eyeBtn" /></a>
        <div class="input-wrap">
          <input type="password" name="password" maxlength="16" id="password"  placeholder="(6-16位字元)"
 
 />
        </div>
      </div>
      <div class="mt30"> <span>輸入驗證碼</span>
        <div class="yzm-button"><a id="captchaBtn" href="javascript:void(0)">獲取驗證碼</a></div>
        <div class="input-wrap input-wrap-captcha">
          <input type="text"
 
 name="code" id="yzm"  />
        </div>
      </div>
      <button href="javascript:void(0)" type="submit" class="login-button" id="registerBtn"></button>
    </form>
  </div>

需要注意的需求：

1. 手機號碼長度：maxlength=”11”
2. 密碼長度：maxlength=”16”
3. 輸入框的位置

4. placeholder內容

   css程式碼：

注意事項：

1. 元素位置控制，最好不要用絕對定位

//設定input最外層div
.mt30 {
    margin: 0.5rem auto;//控制上下間距
    background-image: url(../img/input.jpg);//表單背景圖片
    background-size: 100% 100%;//圖片自適應
    height: 1.6rem;//div高度
    position: relative;
}

//設定輸入框的提示文字
.mt30 span {
    color: #fff;
    font-size: 0.3rem;
    z-index: 2;
    display: block;
    float: left;
    line-height: 1.6rem;//行高跟div高度一致，文字對齊
    width: 2rem;
    margin-left: 0.4rem;    
}

#mobile, #password, #yzm {
    border: none;//去掉輸入框邊框
    padding: 0;//去掉內間距
    background-color: #f26247;//輸入框背景色
    font-size: 0.3rem;//輸入框字型大小
    color: #FFFFFF;//字型顏色
    height: 1rem;//輸入框高度
    display: block;
    width: 100%;
    margin: 0.3rem 0 0 0;//控制輸入框位置
    padding: 0;
    box-sizing: border-box;//通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
//設定placeholder的字型顏色
::-webkit-input-placeholder { /* WebKit browsers */
 color: #cf381c;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color: #cf381c;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color: #cf381c;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: #cf381c;
}

//設定input內層div，控制input的位置
.input-wrap {
    margin: 0 1.1rem 0 2.6rem;
    height: 100%;
    padding-top: 1px;
}

//設定密碼明文按鈕樣式
.switch {
    display: block;
    float: right;
    margin: 0 0 0 0.1rem;
    height:100%;
    width: 1rem;
    text-align: left;
}
//設定明文按鈕圖片樣式
.eye {
    display: inline-block;
    width: 20px;
    height: 10px;
}

//控制驗證碼的input輸入框長度
.input-wrap-captcha {
    margin-right: 2.6rem;
}
//驗證碼按鈕樣式
.yzm-button {
    float: right;
    width: 1.5rem;
    height: 0.5rem;
    background-color: #ffd463;
    border: 10px solid #ffd463;
    -moz-border-radius: 10px;      /* Gecko browsers */
    -webkit-border-radius: 10px;   /* Webkit browsers */
    border-radius: 10px;            /* W3C syntax */
    margin: 0.38rem 0.6rem 0 0;//設定按鈕位置
}
//按鈕文字連結樣式
.yzm-button a {
    display: block;
    color: #a2631f;
    text-align: center;
    text-decoration: none;
    font-size: 0.3rem;
    line-height: 0.5rem;
}

//註冊按鈕樣式
.login-button {
    width: 80%;
    height: 1rem;
    margin: 0 auto 0.5rem ;
    border:none;
    background: url("../img/login.jpg") no-repeat ;
    display: block;
    background-size: 100% 100%;
    border-radius: .1rem;
}