今天完成的任务

1.任务十的css样式

2.任务十的自适应

明天的计划

1.任务十一

遇到的问题

1.流程图

流程图用了flex，三个div的结构，样式上能够表现的同psd图一样，但是如果具体到页面上要让他对相应的事件做出反应可能有点难。

<div class="progressbar-part">
  <div class="progressbar-part-wrap">
    <div class="progressbar-part-line doing"></div>
    <div class="progressbar-part-cirle doing">1</div>
    <div class="progressbar-part-line doing"></div>
  </div>
  <p class="progressbar-part-word doing-p">1.定制纸箱</p>
</div>

doing 的类名是表示流程正在这一步。

/*进度条*/
.progressbar {
       float: right;
    display: flex;
    margin-top: 1.9rem;
}
.progressbar-part-word{
       margin-top: 1rem;
    font-size: .9rem;
    text-align: center;
    color: #cccccc;
}
.progressbar-part-wrap {
       display: flex;
    align-items: center;
}
.progressbar-part-line {
       width: 3.4rem;
    height: .25rem;
    background-color: #cccccc;
}
.progressbar-part-cirle {
       width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: #cccccc;
    font-size: .6rem;
    text-align: center;
    line-height: 1.2rem;
    color: #ffffff;
}
.doing {
       background-color: #ff7f02;
}
.doing-p {
       color: #ff7f02;
}

2.那个带按钮的下拉菜单

<div class="btn-wrap style-lg">
    查看详情
    <button class="btn dropdown click-btn">
        <span class="caret"></span>
    </button>
</div>

将下拉菜单做成旁边的按钮

3.发现自己的页面再ie9一下的页面没法正常显示。应该是一些属性的兼容性问题。

收获

自己能独立解决一些小问题。