今天完成的事

1.使用栅格系统调整选择箱型部分单选按钮在不同分辨率下的布局

col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 input

.input {
    margin: 20px 0;
}

2.调整确定尺寸部分的内部架构 将单选按钮和尺寸输入框都包含在一个方块内 

查看详情包含在另一个方块内 

3.调整定制纸箱内各个方块在移动设备下的布局

4.完善选择材质部分的下拉按钮

<select class="select select2">
    <option value="" style="display:none">查看详情</option>
    <option value="双层A瓦优质">双层A瓦优质</option>
    <option value="三层A瓦优质">三层A瓦优质</option>
    <option value="三层B瓦优质">三层B瓦优质</option>
    <option value="四层A瓦优质">四层A瓦优质</option>
    <option value="五层A瓦优质">五层A瓦优质</option>
</select>

5.使用伪元素修改下拉菜单的视觉效果

在select外包一个div容器再添加伪元素

.w::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background: rgb(18,119,220);
}
.w::before {
    content: url("");
    display: block;
    position: relative;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: rgb(18,119,220);
}

<div class="input col-12 col-sm-6 col-md-4 col-lg-9 col-xl-2">
    <div class="w">
        <select class="select select2">
            <option value="" style="display:none">查看详情</option>
            <option value="双层A瓦优质">双层A瓦优质</option>
            <option value="三层A瓦优质">三层A瓦优质</option>
            <option value="三层B瓦优质">三层B瓦优质</option>
            <option value="四层A瓦优质">四层A瓦优质</option>
            <option value="五层A瓦优质">五层A瓦优质</option>
        </select>
    </div>
</div>

明天的计划

1.完善页面样式

2.提交任务10

3.开始任务11

遇到的问题

1.给select添加伪元素时不显示

查询后才发现select标签不支持伪元素

今天的收获

1.了解到了伪元素不支持的几个标签

img input select 这种单标签不支持before after