Day12 静态页面 头部搜索结构与样式

HTML:

 <!-- 头部搜索 -->
    <div id="headSearch">
      <div class="clearfix layer">
        <h1 class="fl"><a href="#">淘宝网</a></h1>
        <!-- 以图换字：
          1.<h1><a><img></a></h1>  图片通过img引入
          2.<h1><a>淘宝网</a></h1>  以图换字-->
        <div class="code fr">
          <span class="iconfont close">&#xeaf2;</span>
          <span class="c5">手机淘宝</span>
          <img src="../images/3.jpg" alt="">
        </div>
        <div class="search">
          <ul class="searchtab clearfix">
            <li class="active">宝贝</li>
            <li>天猫</li>
            <li>店铺</li>
          </ul>
          <div class="searchcontent clearfix">
            <form action="#">
              <div class="searchbox fl">
                <input type="text">
                <div class="placeholder">
                  <i class="iconfont">&#xe651;</i>
                  <span>9.9包邮</span>
                </div>
                <span class="iconfont imgsearch">&#xe6dd;</span>
              </div>
              <div class="btn fl">
                <button type="submit">搜索</button>
              </div>
            </form>
          </div>
          <div class="hotkey">
            <a href="#" class="c5">积木</a>
            <a href="#">网线</a>
            <a href="#" class="c5">爬行垫</a>
            <a href="#">时尚连衣裙</a>
            <a href="#">男士t恤</a>
            <a href="#" class="c5">时尚休闲裤</a>
            <a href="#">粽子</a>
            <a href="#">沙发</a>
            <a href="#">风扇</a>
            <a href="#">定制窗帘</a>
            <a href="#">男士内裤</a>
            <a href="#">凉席三件套</a>
            <a href="#">办公桌</a>
          </div>
        </div>
      </div>
    </div>

CSS:

/* 头部搜索 */
#headSearch {
  background-color: #fff;
  padding: 24px 0 10px 0;
}
#headSearch h1 a {
  display: block;
  width: 190px;
  height: 58px;
  background: url(../images/go.png) center no-repeat;
  text-indent: -9999px;
  /* 首行缩进 */
  overflow: hidden;
  margin-top: 8px;
}
#headSearch .code {
  width: 72px;
  height: 86px;
  border: 1px solid #eee;
  position: relative;
  margin-right: 110px;
}
#headSearch .code img {
  width: 62px;
  height: 62px;
}
#headSearch .close {
  position: absolute;
  left: -16px;
  /* 14px+2个border */
  top: -1px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  border: 1px solid #eee;
  color: #ddd;
  cursor: pointer;
  /* 放上后变成小手 */
}
#headSearch .search {
  width: 630px;
  margin: 0 auto;
}
#headSearch .searchtab {
  height: 22px;
  /* 有浮动的地方，最好给一个高度，不然容易跟左右图片浮动 */
  padding-left: 17px;
}
#headSearch .searchtab li {
  float: left;
  width: 36px;
  line-height: 22px;
  margin-right: 4px;
  text-align: center;
  color: #f40;
  cursor: pointer;
}
#headSearch .searchtab li:hover {
  background-color: #ffeee5;
}
#headSearch .searchtab li.active {
  color: #fff;
  background-color: red;
  font-weight: bold;
  background-image: linear-gradient(to right, #ff9000, #ff5000);

  /* 是函数  linear-gradient线性渐变  沿着一条直线进行过渡 
   1.方向：默认值是to bottom  to right从左往右
   2.开始的颜色
   3.结束的颜色
   渐变样式：
   css3中兼容性不强，支持IE10及以上的浏览器
   ----filter 滤镜：可兼容到IE8，功能丰富，模糊、投影、发光、雕刻....
   写法:
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='ffff9000',
     endColorstr='#ffff5000',GradientType=1);
 
     #ffff5000  前两个ff代表α，透明度通道
     GradientType=1   1表示水平方向  0表示垂直方向

  目前的淘宝网：
    background-image: linear-gradient(145deg,#ff9000,#ff5000 77%);
   */
  border-radius: 6px 6px 0 0;
  /* 四个值分别为  左上 右上 右下 左下*/
}
#headSearch .searchcontent {
  height: 40px;
}
#headSearch .searchbox {
  width: 554px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid #ff5000;
  border-right: none;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
  position: relative;
}
#headSearch .searchbox input {
  width: 490px;
  height: 36px;
  line-height: 36px;
  outline: none;
  border: none;
  text-indent: 10px;
  position: absolute;
  /* 给绝对定位，使它与.placeholder在同一级别 */
  z-index: 1;
  background-color: transparent;
  /* transparent 透明，为了能够看到后面的文字 */
}
#headSearch .placeholder {
  position: absolute;
  top: 6px;
  left: 14px;
}
#headSearch .placeholder span {
  color: #9c9c9c;
  vertical-align: 1px;
}
#headSearch .imgsearch {
  position: absolute;
  right: 20px;
  font-size: 28px;
  top: -2px;
  cursor: pointer;
}
#headSearch .searchcontent button {
  width: 74px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  border: none;
  background-image: linear-gradient(to right, #ff9000, #ff5000);
  border-radius: 0 20px 20px 0;
}
#headSearch .hotkey {
  height: 25px;
  line-height: 25px;
}
#headSearch .hotkey a:hover {
  color: #f50;
}