2.search搜索模块

一个 search 盒子设置边框border，里面包一个 input 和一个 button ，这两个都不要border，并且去掉点击 input 时出现的蓝色边框，在base.css去掉。

通过 ctrl + F 输入 button 快速查到所在行数

button,
input {
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  /* 默认有灰色边框我们需要手动去掉 */
  border: 0;
  outline: none;
}

1

index.html

  <!-- 头部header start -->
  <header class="header w">
    <!-- logo 模块 -->
    <div class="logo">
      <h1>
        <a href="index.html" title="品优购商城">品优购商城</a>
      </h1>
    </div>

    <!-- search 模块 -->
    <div class="search">
      <input type="text">
      <button>搜索</button>
    </div>
  </header>
  <!-- 头部header end -->

common.css

/* 头部搜索 search */
.search {
  position: absolute;
  left: 347px;
  top: 25px;
  width: 540px;
  height: 38px;
  border: 2px solid #b1191a;
}

2

index.html

    <!-- search 模块 -->
    <div class="search">
      <input type="text" placeholder="语言开发">
      <button>搜索</button>
    </div>

通过 padding-left 来挤开 placeholder 与左边框的距离

common.css

.search input {
  float: left;
  width: 456px;
  height: 34px;
  padding-left: 10px;
}

.search button {
  float: left;
  width: 80px;
  height: 34px;
  background-color: #b1191a;
  font-size: 16px;
  color: #fff;
}

/* 头部header制作 end */

input 与 button 之间有缝隙，用 float：left 来消除，让它两显示在一行