今天完成的事情：

前几天书面上理解了Photoshop的操作，今天开始动手实操。任务三是要通过写代码把这个页面的样子表现出来。

  首先第一步是要先通过vscode写出一个大概的html的文件框架。这个里面就涉及了前面学的行内元素和块级元素，刚开始要写代码的时候有点无从下手的感觉，虽然前面了解了这些知识点，但是作为新手熟练的运用起来还是有点不知道该怎么办，后面就有打开看了下什么是行内元素，什么是块级元素，包含了那些。任务三中主要用到的块级元素有<p>标签、<div>标签、行内元素有<br>和行内块元素<img>。

  现在用代码写出大致的架构，因为html文件创建这个网页的框架，使用css才能让他看上去更好看。

第一步就要先用ps软件切图切下需要的几个图像保存，然后就要用到块元素<img>标签来把图像表现在网页上。

第二步有文字就要用上<p>标签把那一段文字展现出来。

最后的效果图如下：

按照图片资料的样式修改位置，因为<img>标签是单向的，所以它是可以并列的，但是像块级元素<div>就不行，因为它会自动换行。

好了大致的html的框架完成了，现在我们要给它加上样式，这样我们就要用到css了。

因为师兄说任务的要求是要使用外联式写入css文件，首先我们要调整图片大小的尺寸，这就涉及到px，em，rem这几个单位。

px像素：相对长度单位，是相对于显示器屏幕分辨率而言的。

em：相对长度单位，是相对于当前对象内文本的字体尺寸大小，如当前对象内的文本字体尺寸未被人为设置，则相对于浏览器默认字体大小。

所有任意浏览器都默认16px的字体高，并且所有浏览器都支持。1em=16px，那么12px=0.75em 10px=0.625em。为了简化font-size的换算，需要在css中body选择器中声明font-size=62.5%，这样就是值变成16px*62.5%=10px，这样12px=1.2em，10px=1em，也就是把原来的px数值除以10，再换上em单位就行了。

还是用外联<link rel="stylesheet" type="text/css" href="文件名.css">,首先要给整个页面换上背景颜色，就要用ps软件获取颜色值，在body中用class属性开一个类名，然后在css中写入代码，这样background背景就换好了。这里就要用到<div>这个容器级标签，才能运用class属性的作用。

  咱们一步一步来，背景换好了，接下来就要调整图片尺寸大小用上px像素单位，可以直接在chrome中F12中调试查看切图的px大小除以2就是图片的宽高，数值弄好了就要把这些数值以代码的形式写进css中，因为class的多元化，还是运用class属性来写入css中，css代码如下：

效果对比如下：

、、、

接下来就是第二个图片怎么能把它居中显示，这里就要用到内联式这是正确的写法，师兄说内外联都要了解学会运用

通过yangshi指令单独让图片2居中显示。align：center（对其居中），效果如下：

最后就是要通过float浮动来完成屏幕自适应调整，这个问题弄了好久也没头绪，怎么调试都不对。这里就涉及到margin属性和padding属性，一个是内边距，一个是外边距，作用各不一样，所以要完成和资料上一样就要了解运用这两个属性，在chrome中调试好差不多任务三就算是完成了。

明天的计划：

完成任务三的提交，接着做任务，在任务中多操作多熟悉代码的写法。

问题：

里面涉及到行内元素、块级元素、行内块元素还有盒子模型，内边距margin属性和外边距padding属性，内外联式的应用，现在的问题在于代码写起来有点不能理解，原来要这样写才能有效果，为什么要这样写呢。像上面用内联式style="text-align:center"这个写法就运用到了新知识，感觉今天做任务三是一个问题接着一个问题。像px像素单位的出来的值为什么要除以2，还有em和rem没有实际操作过不能理解。

还是感觉基础有点薄弱，没有理解所以今天的任务是师兄帮忙才勉强写出来的。

总结：

学习是一件很漫长的旅程，坚持下来才能发现美好风景，收获硕果，继续努力！谢谢耐心指导我的师兄

写着写着已经过了12点，囧。。。。。。