前端练习项目——品优购 Day3 header

 1.整体结构分析

        首先header是一个大盒子，与版心相同（因此直接加上版心的类就行）。然后是header可分为四个区域：左边是logo盒子，中间是搜索框盒子和热点词盒子，右边是购物车盒子。放置四个盒子需要用到定位。

2.左侧logo制作

 （1）logo的制作要符合LOGO SEO优化

    1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

    2.h1里面再放一个可以返回首页的链接，把logo的背景图片给链接（也就是要把a转化为块元素）

    3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来：第一种方法：text-indent:-9999px;  然后overflow:hidden。第二种方法：直接给font-size:0;  这样就看不到文字了。

    4.最后给链接一个title属性，这样鼠标放在链接上可以看到提示文字。

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

  （2）关于logo的位置

     要使用子绝父相的定位方法，宽度和高度测量出来，top是离盒子顶端的距离

/* header头部制作 */
.header {
    position: relative;/*子绝父相*/
    height: 105px;
    /* background-color: pink;   辅助功能的背景色*/
}

.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    /* background-color: skyblue; */
}

   （3）对logo里a的处理

      注意a的width需要根据背景图片大小进行变化（或者调整背景图片大小 background-size） 

.logo a {
    display: block;  /*转换为块级元素，否则不能调整长宽也不能加背景图片*/
    width: 175px;
    height: 61px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    font-size: 0;
}

3.中间搜索框制作

（1）结构分析

  搜索框是一个大盒子，大盒子里面有两个小盒子，左边是搜索盒子，右边是按钮盒子 

  运用<input>和<button>两个标签，其中placeholder属性用于初始化搜索框里的文字

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

  用定位把search盒子定位好，加上红色边框。 

.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

（2）左侧搜索栏制作

.search input {
    float: left;
    width: 455px;
    height: 36px;
    padding-left: 10px;
}

  由于input和button都是块级元素，因此两者不能出现在一行。因此要给两者加上浮动。

  padding-left是令盒子与大盒子左边留有一点空隙，从而使"语言开发"这几个字更美观。

  高度保持一致。

（3）右侧按钮制作

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

  font-size用于调整字体大小，color是字体颜色，background-color是背景颜色。同样使用左浮动

（4）搜索框和按钮的初始化

       由于搜索框和按钮自带有边框，并且搜索框在搜索时还会变为蓝色边框，因此要在base.css中去掉自带的属性。

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 去掉默认边框和点击之后的边框 */
    border: 0;
    outline: none;
}

4.中间热点词模块(horwords)制作

  跟制作快捷导航栏的思路一样：用li包含a

<!-- hotwords模块制作 -->
    <div class="hotwords">
        <ul>
            <li><a href="#" class="style_red">优惠购首发</a></li>
            <li><a href="#">优惠购首发</a></li>
            <li><a href="#">亿元优惠</a></li>
            <li><a href="#">9.9元团购</a></li>
            <li><a href="#">每满99减30</a></li>
            <li><a href="#">办公用品</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">通信</a></li>
        </ul>
    </div>

  其中字体颜色为红色的，可以加入“style_red”类名。

  然后是用定位把热点词定位到搜索框下面。

.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}

  由于li是块级元素，因此要让所有元素都排列在一行上，需要用到浮动，然后用margin制作间隔。

.hotwords ul li {
    float: left;
    margin: 0 10px;
}

5.shopcar模块制作

（1）结构分析

       整体是一个盒子，用定位定到右边。文字要放在最中间。然后左边是一个购物车，右边是一个右箭头——使用字体图标。右上角是一个小盒子，可以用<i>来表示，用定位的负值来制作

（2）整体的盒子

<div class="shopcar">
        <span class="iconfont gouwuche">&#xf0179;</span>我的购物车<span class="iconfont youjiantou">&#xe603;</span>
        <i class="count">8</i>
    </div>

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    /* 使文字在竖直上居中 */
    text-align: center;
    /* 使文字在水平上居中 */
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

 比较重要的就是让文字处于中心的方法：1.line-height=height;  2.text-align:center;

（3）对字体图标的处理

.shopcar .gouwuche {
    position: absolute;
    left: 23px;
    color: red;
    font-size: 15px;
}

.shopcar .youjiantou {
    position: absolute;
    right: 15px;
}

       要注意的地方有两点：1.如何调整字体图标的位置：由于<span>的父元素是绝对定位，无法使用子绝父相的方法。但是依然可以把字体图标设为绝对定位，此时为子绝父绝，子元素依然根据父元素的位置进行定位。      2.字体图标属于字体，因此可以使用font-size与color调整字体图标的属性。

（4）右上角提示count统计模块制作

.count {
    position: absolute;
    top: -5px;
    right: 20px;
    left: 105px;
    /* 打印文字时，文字段向右移动 */
    /* height: 14px; */
    /* 打印文字时，问字段向左移动 */
    line-height: 14px;
    /* 修改文字的位置 */
    color: #fff;
    background-color: #e60012;
    padding: 0px 5px;
    /* 把盒子撑大 */
    border-radius: 7px 7px 7px 0;
    /* 一个边为直角，剩下为圆弧 */
}

  注意的点：

          1.与<span>相同，count模块也是使用子绝父绝的方法来调整位置的。

          2.top等为负值的时候可以让元素的位置离开大盒子。

          3.用padding可以把盒子撑大（前提是撑大后不会遇到其他盒子的边界，否则CSS3会自动调整） 

           4.用left和right的区别：用left调整位置的话，撑大盒子（如文字过长）会向右撑大，而用right调整则是向左撑大。

           5.一个边为直角剩下是圆弧的制作：用border-radius，从左上角开始，到左下角结束，顺时针规则。

     7.27更新：购物车模块应该是可以点击的，因此做出修改，用a代替div，然后把a转换为块级元素即可

<!-- 购物车模块 -->
    <a class="shopcar" href="#">
        <span class="iconfont gouwuche">&#xf0179;</span>我的购物车<span class="iconfont youjiantou">&#xe603;</span>
        <i class="count">8</i>
    </a>

.shopcar {
    display: block;
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    /* 使文字在竖直上居中 */
    text-align: center;
    /* 使文字在水平上居中 */
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}