发表于: 2019-06-21 21:22:38

1 647


     今天完成的事:今天进行了任务6,期间遇到了雪碧图过大,然后百度,用

background-size: 24.05rem 5.45rem;

进行整体雪碧图的缩小,然后把背景尺寸和定位都等比例减小

width: 2.6rem;
height: 2.5rem;
background-position: -15.1rem -0.6rem;

使得雪碧图和ps的大小一致,期间还试了在ps时直接把图缩小保存,后来保存的太小了,已经快失真了,就改为上面的整体缩小。

在昨天使用的bootstrap设置的列表项网格,后来改为自己的,发现就是弹性盒子的等比例空间,再让每个下拉框占满主轴

.lie2{
display: flex;
}
.lie3{
display: flex;
flex: auto;
height: 4rem;
}
.lie4{
width: 100%;
}

     遇到的问题:因为中间表格子用的是一个盒子放两个table,在把这个盒子设置为弹性盒子,让两个table向两侧靠,然后中间空出来没有线框了,后来设置左侧表格为felx: 2 0 auto;,发现无法做成空间不足时左侧文本出现省略号,就想着让右侧占多余空间,结果右侧的文本直接贴到左侧的文本上了。后来去百度了一下,table标签大部分时间利大于弊:

1页面渲染性能问题:浏览器需要将整个表格完全读完后才会开始渲染

2不利于搜索引擎优化:搜索引擎喜欢内容与修饰分开。

3可访问性差:屏幕朗读软件和盲文浏览器无法很好地理解 Table 中的内容。

因此最后决定不使用table,准备用div和bfc来设置。

     明日计划:准备把主体部分重新改一下,然后看一下有什么知识遗漏,梳理一下。

     收获:学会了雪碧图,弹性盒子的等比例空间的用法,知道了table的缺点。


返回列表 返回列表
评论

    分享到