项目实战-login-form

html部分

<!---广告区域--->
<div class="ad">
  <img src="images/text-01.png">
  <p>989992家公司 | 7609558个职位，在LJ等你</p>
</div>
<!---登录表单部分--->
<div class="login-form">
  <!---电话号码--->
  <div class="tel">
    <div class="area-code"><div>
      <!---当前显示的编码--->
      <span class="area-code-now">0086</span>
      <!---下拉菜单--->
      <div class="area-code-list">
        <dl>
          <dt>常用</dt>
          <dd>中国<span>0086</span></dd>
          <dd>中国香港<span>00852</span></dd>
          <dd>中国台湾<span>00886</span></dd>
          <dd>中国澳门<span>00853</span></dd>
          <dd>美国<span>001</span></dd>
        </dl>
        <p></p>
      </div>
    <input type="text" class="user-tel" placeholder="请输入手机号">
  </div>
  <!---验证码--->
  <div class="yanzhengma"><div>
    <input type="text" class="yanzhengma-text" placeholder="验证码">
    <i>|</i>
    <span>获取</span>
  </div>
  <!---登录注册按钮--->
</div>

css部分

.login-banner-c .ad img {
  display: block;
  width: 330px;
  height: 29px;
}
.login-banner-c .ad p {
  height: 30px;
  line-height: 30px;
  color: #fff;
  cursor: defalt;
}
/* 右侧表单部分 */
.login-banner-c .login-form {
  float: right;
  margin-left: 5px;
}
.login-banner-c .login-form .tel {
  float: left;
  width: 212px;
  height: 35px;
  margin-right: 8px;
  background-color: #fff;
}
.login-banner-c .login-form .area-code {
  float: left;
  position: relative;
  width: 66px;
  height: 35px;
}
.login-banner-c .login-form .area-code .area-code-now {
  float: left;
  width: 66px;
  height: 35px;
  padding-left: 10px;
  background: url(../images/arrow.png) no-repeat right center;
  color: #999;
  line-height: 35px;
  cursor: pointer;
}
.login-banner-c .login-form .area-code .area-code-list {
  position: absolute;
  display: none;
  left: 0px;
  top: 35px;
  width: 214px;
  height: 288px;
  border: 1px solid #eeeeee; 
  background-color: #fff;
  over-flow: auto;
  cursor: pointer;
}
.login-banner-c .login-form .area-code .area-code-list dl dd {
  height: 36px;
  padding: 0 12px;
  line-height: 36px;
  color: #999999;
}
.login-banner-c .login-form .area-code .area-code-list dl dd:hover {
  color: #66b48b;
  background-color: #f4f4f4;
}
.login-banner-c .login-form .area-code .area-code-list dl dd span {
  float: right;
}
.login-banner-c .login-form .area-code .area-code-list p {
  padding: 40px 12px;
  line-height: 22px;
  color: #b5b5b5;
}
.login-banner-c .login-form .user-tel {
  float: left;
  width: 136px;
  height: 35px;
  padding-left: 10px;
}
.login-banner-c .login-form .yanzhengma {
  float: left;
  width: 146px;
  height: 35px;
  margin-right: 8px;
  background-color: #fff;
}
.login-banner-c .login-form .yanzhengma .yanzhengma-text {
  float: left;
  width: 80px;
  height: 35px;
  margin-right: 10px;
}
.login-banner-c .login-form .yanzhengma i {
  float: left;
  width: 8px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #d5dadf;
}
.login-banner-c .login-form .yanzhengma span {
  float: left;
  width: 42px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #00b38a;
  cursor: pointer;
}
.login-banner-c .login-form .login-or-register {
  float: left;
  width: 105px;
  height: 33px;
  border: 1px solid #fff;
  margin-right: 4px;
  background-color: #00b38a;
  line-height: 33px;
  text-align: center;
  color: #ccefe7;
  cursor: pointer;
}
.login-banner-c .login-form .login-or-register:hover {
  background-color: #85c3a2;
  color: #e0f0e8;
}