今天完成的事情：

1.任务十界面不使用bootstrap，纯css写。

明天计划的事情：

1.完善细节。继续推进任务。

遇到的问题：

1.查看详情栏，整体使用select属性，制作一个下拉菜单，并修改字体样式。其中，默认的下拉菜单有个黑色小三角，如图：

修改样式时需要先清除小默认的小箭头，使用

appearance: none;

然后这里我图方便就用了箭头的图片贴上去。实现效果如下。

2.我的进度条的写法：

<div class="process-main">
    <div class="process-box">
        <div class="path-line">
            <div class="process-point">1</div>
        </div>
        <p class="path-word">1.定制纸箱</p>
    </div>
    <div class="process-box">
        <div class="path-line">
            <div class="process-point">2</div>
        </div>
        <p class="path-word">2.选择数量</p>
    </div>
    <div class="process-box">
        <div class="path-line">
            <div class="process-point">3</div>
        </div>
        <p class="path-word">3.上传附件</p>
    </div>
    <div class="process-box">
        <div class="path-line">
            <div class="process-point">4</div>
        </div>
        <p class="path-word">4.确认下单</p>
    </div>
</div>

path-line是横线，process-point是圆点，path-word是文字部分,将各部分布局好后。使用hover

.process-box:hover {
    cursor: pointer;
}
.process-box:hover .path-line {
    background-color: #FF7F02;
}
.process-box:hover .process-point {
    background-color: #FF7F02;
}
.process-box:hover .path-word {
    color: #FF7F02;
}

鼠标划过时各个部分颜色变为橙色。

3.同理，登录注册栏界面写法也类似，鼠标划过时改变框的宽度和颜色。即可实现。

4.折叠导航栏暂不知怎么写，目前是先用媒体查询在小于767px时隐藏掉原导航栏，然后再写出了一个图标框。不过目前不知道怎么手写下拉菜单。嗯。

收获：

1.hover的使用更加熟练一些了。遇事不决就hover，再不行就媒体查询。

2.手写了未折叠导航栏和流程进度条。进度条只能实现鼠标划过时变色，后面应该会学到真正的写法。