今天完成的事

1.调整雪碧图的css参数 并设置雪碧图X轴为400px 等比例缩小

span1 {
    display: flex;                      /*设置为弹性布局*/
    flex-direction: column;             /*设置为flex布局 主轴从上往下垂直布局*/
    width: 140px;                       /*设置选取宽度*/
    height: 20px;                       /*设置选取高度*/
    background-image: url(列表页.png);  /*选定雪碧图*/
    background-repeat: no-repeat;       /*设定图片不重复*/
    background-size: 400px;             /*设定X轴为400px等比例缩小*/

2.重新调整雪碧图选图参数

.icon1 {
    background-position: -10px 0;       /*设置选图坐标*/
}
.icon2 {
    
background-position: -10px -48px;   /*设置选图坐标*/
}

.icon3 {
    background-position: -360px -24px;  /*设定选图坐标*/
}

3.调整文字大小

font-size: 12px;                    /*设置文字大小*/

4.为每个列表添加下边框

border-bottom: 1px solid silver;     /*每一行列表下边框宽度1px 实体线 颜色*/

5.使文字能超出自动显示省略号

.text {
    width: 50px;
    overflow: hidden;                   /*设置滚动方式*/
    white-space:nowrap;
    text-overflow: ellipsis;
}

6.修改列表头样式

border:1px solid silver;           /*设置列表头边框*/

明天的计划

1.完善列表样式

2.开始了解下一个任务的内容

3.思考深入思考的问题

遇到的问题

1.在inline-flex布局中不能很好的布局各个元素的位置 使它们能自动变化位置

或许应该采用float布局

2.屏幕缩到 最小宽度时没有省略号出现

明天再排查哪个部分出问题了

收获

1.掌握了雪碧图设置大小的规律