发表于: 2019-01-10 00:20:20
1 629
Day 10
今天完成的事情
1.更改了chorme的安装路径,解决了从webstorm打开chorme时时灵时不灵的坑爹境况
2.今天尝试了另外一种切图导出方式,算成功?
3.把切好的图片插入html文件
4.用PS(拾色器)抓取设计图的背景色
遇到的问题
1.新学习到一种切图导出方式
将需要的元素使用切片工具进行切片
然后使用文件---导出----存储为web所用格式
点击存储,然后就会生成一个文件夹
文件夹中会存储所有切片
所以我应该算是初步切图了对吧
但是这跟我昨天导出的图片不一样啊,为什么还会有背景色呢?这不是裁剪吗,不是切图吧?
然后看网上很多人说从图层直接导出PNG
尝试了一下,这是两次导出的结果,好像是差不多了吧
因为第二次导出中整合透底.png 纯白色,所以拿去PS里玩了一下发现只是因为纯白底色没办法显示而已,放心了
2.将切好的图放在桌面上的图片插入到文件里后,就开始尝试编辑
用标尺工具测量页面高度1010px,返回键占高88px,葡萄藤logo顶部至页面顶部124px
将px转化为em,(在body选择器内添加 font-size:62.5%),把测得的数据添加到各类选择器属性内
为什么完全不够尺寸呢,明明设置的是8.8em (88px),在标尺上看来连60也不到
文字与边框间的距离为88px,转换为8.8em,则在网页上体现为近400像素
好奇心起,我把font-size:62.5%更改为font-size:125%,并分别更改为rem和em,虽然只设置了125%,但em应该和rem一样是以根元素为基准的吧,为什么会出现两边不一样的情况呢
收获
1.学会切图
2.学会插入图片
3.学会拾取设计稿中的颜色
4.对rem,em,px有了更深的认识
明天计划学习
1.今天突然看到了display和position感觉是跟float一样对CSS布局很有用的东西,明天深入了解一下
2.拿到设计稿应该进行的的第一步测量 近乎失败,明天再接再厉吧
P.S. 怀疑是因为太长或图片太大太多所以无法提交,分成两半先提交一半再编辑粘贴进另一半,终于大功告成,
ღ( ´・ᴗ・` )比心
评论