今天完成的事情：任务10头部和底部

明天计划的事情： 继续解决问题

遇到的问题：1.进度条

   解决方法：

<div class="progress">        <!--进度条-->

    <div class="progress-bar"></div>     <!--进度条-->

</div>

<div class="progress-box">

    <div style="color: #ff7f02">1.定制纸箱<div class="radius1">1</div></div>

    <div>2.选择数量<div class="radius2">2</div></div>

    <div>3.上传附件<div class="radius3">3</div></div>

    <div>4.确定下单<div class="radius4">4</div></div>

</div>

.progress {

margin-top: 3.8rem;

width: 40vw;

height: .7rem;

}

.progress-bar {

width: 25%;

background-color: #ff7f02;

}

.progress-box {

position: relative;

display: flex;

flex-direction: row;

justify-content: space-between;

padding: 3rem 3.4rem;

width: 40vw;

font-size: 1.8rem;

color: #ccc;

}

/*进度条里的小球*/

.radius1 {

position: absolute;

text-align: center;

line-height: 2rem;

top: -1.5rem;

left: 11%;

width: 2rem;

height: 2rem;

border-radius: 50%;

font-size: 1.6rem;

color: #fff;

background-color: #ff7f02;

}

.radius2 {

position: absolute;

text-align: center;

line-height: 2rem;

top: -1.5rem;

left: 36%;

width: 2rem;

height: 2rem;

border-radius: 50%;

font-size: 1.6rem;

color: #fff;

background-color: #e9ecef;

}