[外门弟子]JS-8|2019年01月08日的日报-技能树.IT修真院

发表于： 2019-01-08 23:17:23

1 746

Day 9

今天完成的事情

1.尝试用div做了一点大概的框架

2.Photoshop从零入门的学习了一部分知识，尝试切图，失败

遇到的问题

1.每次想把日报整好看点跑去调整行距，结果就卡的跟JPG格式似的，卡多了几次终于明白昨天不是提交任务的锅了，只能放弃，难过。

2.尝试着用div来做基本的框架，

.background{
    margin:  0 auto;
    padding: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #555555;
}

结果发现给head设置的背景色怎么都显示不出来，只显示空白页面，直到我设置了padding

padding: 10%

才发现原来又没有把盒子撑起来。

复制粘贴了一位群里小姐姐告诉我的代码，当场满血复活，赶紧把它复制粘贴到我的html新建文件模板里。

记得当时她只留下一句话：以后写代码的时候都要把这个加上，等你做到任务三就知道了，感谢ing

html,body{
       height: 100%;
    width: 100%;
}

3.想先尝试用在网上找到的教程做一下切图

①拉参考线

②选择切片工具

③选项栏点击“基于参考线的切片”按钮（这里就出错了，不知道为什么每次一点选基于参考的切片参考线就会乱掉）

④选择切片选择工具（硬着头皮想以错误的参考线完成整个流程）

双击切片，更改文件名等信息（点击了确定却发现没有保存文件的框弹出来，但感觉网上好像大家都是这样操作的，不知道哪里出错了，师兄给点意见吧）

⑤保存（没出现保存的界面，没办法保存）

全选切片，统一设置存储格式

P.S. :我直接找到元素的图层然后导出了透明的图片，算作弊吗？

收获

1.复习&理解：

盒子模型：

content 就是盒子里装的东西

padding 就是怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料；

border 就是盒子本身了

margin 为使盒子的摆放更灵活，摆放的时候的不能全部堆在一起，要留有一定的空隙

2.从零开始入门Photoshop，做了PS软件内的自带教程，再去网上做了一些切图的功课，了解到前端人员切图的一些知识，整理一下码在这里

▪ 打开设计稿，第一步要做的是获取信息：

①尺寸信息：测量
所有数据都来自测量，数据来自矩形选框工具+信息面板
添加到选区：按住Shift
从选区减去：按住Alt
与选区交叉：按住Shift+Alt
②颜色信息：取色
所有颜色都要取色，工具主要是拾色器+吸管工具（由于图层的叠加效果，显示的颜色可能与实际颜色不相符，要用拾色器来获取颜色）要特别注意的是不同区域不停的点击，看颜色是否变化

获取信息最重要的是将画布拉的尽量大，尽量减小误差。

▪ 前端人员需要切片的内容主要有