发表于： 2018-08-22 23:01:57
1 775
今天完成的事情：任务六的大致完了，还有一些样式还有位置。需要做改动。图片是我是用雪碧图做的。
明天计划的事情：任务六做了好几天了。 明天修改一下代码，提交让师兄帮忙找点问题。
遇到的问题和收获：
1.如果屏幕过窄时，设置左边的文字被截断出现”…”省略号。这个百度了一下就知道了。
2.雪碧图的定义： 把网页中一些背景图片整合到一张图片中，再利用background-image 和 background-position 精确定位出背景图片所在的位置。
使用雪碧图的规则： 静态图片，不随用户信息的变化而变化；小图片，图片容量比较小，大图不建议拼成雪碧图；加载量比较大的图片。一般情况下，雪碧图需要保存为PNG-24的文件格式。
雪碧图的优点： 减少加载网页图片时对服务器的请求次数；提高页面的加载速度。
雪碧图的缺点： 内存使用；拼图维护比较麻烦；使CSS的编写变得困难。
我做的没那么麻烦， 将需要的图片用PS切好，并将宽高设置为原来的一半，导出后用CSS Sprites 。做成一个从上到下排列的雪碧图。
记好小图片的狂傲和位置。就可以了。
3.头部的小图片我用的固定定位。中间还有底部的小图标我都是用的伪元素。
底部遇到个问题，用伪元素做效果不好 上下没有对齐。我帮代码传上去了，师兄帮忙看下。用定位做会不会比较好点。
返回列表
评论