发表于： 2019-02-15 22:49:11
1 903
Day23
今天完成的事情
1.完成任务五
2.了解及尝试做雪碧图
遇到的问题
1.尝试对footer使用弹性盒子进行布局，发现space-around失效？
只能同时使用margin来实现布局
2.自我介绍部分的布局对我来讲比较复杂，只能将各个类选择器统一设置然后在行内设置自我介绍
3.文字始终垂直居中，太难了太难了
收获
1.雪碧图：真正的名称是Sprite图，也就是说把网页需要的全部图标合成在一张背景图上一次完成加载，其目的是减少服务器的请求次数。
找到了一个快速在线做雪碧图的网站（P.S.:不用自己做太棒了)
定位图标是白色所以似乎没有显示，定位的位置也已经标记了
.bg-Write {
width: 94px; height: 94px;
background: url('css_sprites.png') -10px -10px;
}
.bg-地址 {
width: 19px; height: 23px;
background: url('css_sprites.png') -124px -74px;
}
.bg-定位 {
width: 42px; height: 44px;
background: url('css_sprites.png') -124px -10px;
}
.bg-日历 {
width: 24px; height: 24px;
background: url('css_sprites.png') -186px -124px;
}
.bg-首页 {
width: 46px; height: 40px;
background: url('css_sprites.png') -10px -124px;
}
.bg-我的 {
width: 42px; height: 41px;
background: url('css_sprites.png') -186px -10px;
}
.bg-下拉 {
width: 13px; height: 8px;
background: url('css_sprites.png') -76px -124px;
}
.bg-详情 {
width: 19px; height: 33px;
background: url('css_sprites.png') -186px -71px;
}Drag & Drop files here or select them using:
一提交日报才发现格式乱码了，只能截图成图片了
明天计划学习
1.应用雪碧图
2.继续完成任务六
返回列表
评论