网页制作-搜索框

结构

• 搜索框盒子
• 左侧input输入框
• 右侧button按钮

<div class="search">
  <input type="text" name="" id="" value="输入关键词">
  <button></button>
</div>

样式

1. 搜索框盒子

• 浮动
• 宽高

.search {
  float: left;
  width: 412px;
  height: 42px;
}

2. 输入框

• 浮动
• 宽高除去边框
• 除去右边框
• 设置文字左缩进

.search input {
  float: left;
  width: 360px;
  height: 40px;
  color: #bfbfbf;
  font-size: 14px;
  text-indet: 15px
  border: 1px solid #00a4ff;
  border-right: 0;
}

3. 按钮

• 浮动 (行内块元素间有间隙，需要浮动）
• 宽高加上输入框的边框
• 去掉边框
• 加背景图片或加问题，背景等

.search button {
  float: left;
  width: 50px;
  height: 42px;
  border: 0;
  /* background: url(images/search.png); */
  background-color: #00a4ff;
}

效果

search.png