项目实战-login-banner大结构思路：分析区域，选择标签元素，补充细节。布局类型：通栏背景，内部包含版心居中的

思路：分析区域，选择标签元素，补充细节。
布局类型：通栏背景，内部包含版心居中的额主要内容，内容包含左、右浮动的两部分。
注意：实际网页中，部分表单效果通常使用其他标签+CSS样式的效果进行模拟，比如按钮、下拉菜单等。
布局结构如下： html部分：

<head>
  <style>
    <link rel="stylesheet" href="css/loginBanner.css">
  </style>
</head>
<div class="login-banner">
  <div class="inner-c login-banner-c">
    <!---广告区域--->
    <div class="ad"></div>
    <!---登录表单部分--->
    <div class="login-form"></div>
  </div>
</div>

css部分：

.login-banner {
  width: 100%;
  height: 120px;
  background-color: #00b38a;
}
.login-banner-c {
  height: 83px;
  padding-top: 37px;
  background: url(../images/logo-ad.png) no-repeat left bottom;
  background-size: 228px 120px;
}
/* 左侧盒子 */
.login-banner-c .ad {
  float: left;
  padding-left: 237px;
}
/* 右侧表单 */
.login-banner-c .login-form {
  float: right;
  margin-top: 5px;
}