标签：盒子 color Day3 height header background ------ logo left

 1.整体结构分析

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

<!-- header头部模块-->
    <div class="header w">

四个盒子的位置需要用到定位

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，从左上角开始，到左下角结束，顺时针规则。

标签：盒子,color,Day3,height,header,background,------,logo,left
来源： https://blog.csdn.net/Acc222222/article/details/119112578

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。