任务一还没审核，这是任务三的日报

今天完成的事情：完成任务三，了解了ps的切图和颜色识别，
明天计划的事情：任务四
遇到的问题：下面详细介绍
收获：会ps简单切图，和颜色色号识别，对浮动有进一步的认识，{float:left}{float:right}，对盒子padding，maring的选择简单理解，学会控制图片大小，加深html和css标签的认识：max-width、text-align: justify、flot:left、float:right、

①下载魔镜介绍页.psd和安装photoshop，

发现问题：有一个creat cloud软件，好烦人，就是卸载不掉。

解决问题：下载AdobeCreativeCloudCleanerTool.exe，对它进行卸载。

②对任务分析

a 需要4个图片。

 切图：通过ps切片工具得到“背景图，箭头图标，葡萄藤logo，三人图标，葡萄图”。

【最好放在一个文件夹里，方便管理】

发现问题：导出保存图片是出现很多其他图片

解决方案：昂，因为切图是把图片按线切开，和抠图不一样。把需要的选择出来就行。

b对于背景：可以用<img>插入纯色背景图片，或者设置body的background-color。

发现问题：怎样用Ps从图片中提取PANTONE色编号

解决方案：在ps中左侧工具栏>吸管工具>提取你需要的颜色>在右上侧位置点击选取颜色>则打开颜色库了，里面显示卡号。如此背景色：68cdd5

   则css里body{background-color:#68cdd5}

c箭头图标：在左上方，用flot:left；

且没有贴边，对body的padding，maring做出规定；

且不会随着屏幕宽度变大而变大，应该设置最大的宽度max-width: 50px；

d剩下的就是主要内容，作为一个大块级元素，用div；

           且在视图中间，body{text-align: center}【包括了图片和文字的居中】

并设置padding，maring

且宽度变化下，模块高度都不变，计算好小块级元素的盒子大小。

d葡萄藤losgo：不变大而变大，设置max-width: 120px；

               下方有空有空间，设置padding，maring

e文字介绍：与葡萄藤logo放置一起，作为一个块级元素；

用<p>或者<span>，【<span>内联元素，可用作文本的容器】；

白字{coloe:white}

且得居中，在body已经设置

且两边对齐，text-align: justify

f三人图标，葡萄图标：作为一个大块级元素。再分别作为一个小块级元素。

                     三人图标在左：{float:left}；

葡萄图标在右：{float:right}

不变大而变大，设置max-width: 50px；

g数字和英文：也白字，就同一p{coloe:white}

             且得居中，在body已经设置

h得到结果如下

③上传到github，并生成网页。

发现问题：无法连接github仓库

解决方案：输入：$ git remote re origin

github成果展示：https://15188302990.github.io/studying-it-web/task3/Task3.html

④用filezilla上传到云服务器，得到成果展示网页。

云服务器成果展示：http://118.126.113.248/jnshu773/study/task3/Task3.html

⑤相关知识：

1 如何进行自适应网页设计？

   a用相对单位，不用绝对单位。

   b用浮动

2 控制图片大小用px

3 px、em、rem、%、vw、wh、vm等单位有什么区别？

除了px，其他单位都是有参照物的

% 相对于父元素

vw和vh 相对于视口宽度和高度

vmin/max 取的是视口宽度高度，二者中比较小/大的那个

em rem 与字体大小相关

4.css有哪些选择器，优先级如何计算？

可以直接选 body div p等等；还可以选所有子元素，相邻的；选class、id，属性；还可以选first letter之类的，各种组合。

5选择器类型的优先级：id＞class＞type

类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）

类选择器（class selectors） (例如,.example)，

ID选择器（例如, #example）

6什么时候用margin好，什么时候用padding好？

margin垂直方向会合并，而padding不会

Margin不会被鼠标点中，padding会被点到