发表于： 2019-05-22 11:29:45
1 725
今天完成的事情：任务六做了有两天，功能大致完成了，还有一些没能实现
明天计划的事情：提交后的问题进行修改
遇到的问题：
1、屏幕过窄时,设置左边的文字被截断出现”…”省略号。
搜索了一下，得出以下代码：
效果不知为什么实现不了，屏幕过窄造成布局崩溃。
收获：
1、外链了flexible.js,有了它就不必再为移动端各种设备兼容烦恼，rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=100px，我认为这种换算计算简单并可以兼容chrome。
2、使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。
显示雪碧图的条件：
1）需要一个设置好宽和高的容器。
2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。
调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）
雪碧图的缺点： 拼图维护比较麻烦，要多出一个步骤，CSS的编写也变得困难。
返回列表
评论