今天完成的事

1.下载任务10的psd素材

2.切取素材

3.简单架构header部分

<header class="cont background-blue">
    <div class="row">
        <p class="header-p1">客服热线：010-594-78634</p>
    </div>
</header>

.cont {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .cont {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .cont {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .cont {
        width: 1170px;
    }
}
.background-blue {
    background-color: rgb(18,119,220);
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.header-p1 {
    color: white;
}

4.调整架构，外包一个容器来设置背景颜色。并且调整body的默认margin值为0。

<header class="background-blue">
    <div class="cont">
        <div class="row">
            <p class="header-p1">客服热线：010-594-78634</p>
        </div>
    </div>
</header>

body {
    margin: 0;
}

5.调整客服热线部分的样式

.header-p1 {
    color: white;
    height: 40px;
    line-height: 40px;
    margin: 0;
    font-size: 14px;
}

6.增加一个css文件，将bootstrap的栅格系统搬运过来

7.设置header登录与注册部分的样式

.hover1-header {
    border-left: 1px solid white;
    border-right: 1px solid white;
}
.hover1-header:hover {
    background-color: white;
    color: rgb(0,0,0);
    cursor: pointer;
}

8.设置样式后发现1px宽度的边框将注册部分挤到了下面

那么两个a元素标签设置样式box-sizing

.hover1-header {
     border-left: 1px solid white;
     border-right: 1px solid white;
    box-sizing: border-box;
 }

9.架构Nav部分

<nav class="background-silver">
    <div class="container">
        <div class="row">
            <a class="">首页</a>
            <a class="">在线定制</a>
            <a class="">标准箱</a>
            <a class="">品质保障</a>
        </div>
    </div>
</nav>

10.修改nav部分为flex 并且浮动向右

.right {
    float: right;
    display: flex;
}

11.设置nav部分子元素的样式

.nav-a {
    padding: 10px;
    margin: 10px 0 10px 50px;
    background-color: white;
    box-shadow: 1px 1px  silver;
    border-radius: 5px;
}
.nav-a:hover {
    background-color: rgb(18,119,220);
    color: white;
    cursor: pointer;
}

今天完成样式预览

明天的计划 

1.完成页面的footer部分以及页脚

2.完成流程图的搭建及调整

3.重新复习一下多选及单选按钮的知识

4.尝试完成选项部分

遇到的问题

1.在header设置两个A标签的宽度都为col-lg-1时 整个header的模块会变为高度为0 

而只设置一个A标签为宽度为col-lg-1时 默认号码部分的设置高度可以撑起父元素高度为40px

不知道为什么出现这种情况

<header class="background-blue">
    <div class="container">
        <div class="row">
            <p class="header-p1 col-lg-3 col-md-3 col-sm-3 col-xs-3">客服热线：010-594-78634</p>
            <a class="header-p1 col-lg-1">登录</a>
            <a class="header-p1 col-lg-1">注册</a>
        </div>
    </div>
</header>

现在先直接设置header的高度为40px 但是希望了解为啥有这状况

今天的收获

1.box-sizing 

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

• content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

2.学习到了box-shadow 

box-shadow

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。