2018年11月3日任务3日报

今天完成的事情

1.学习了photoshop的基本操作和自动切图

2.task3完成。代码连接

界面分为最上面一个返回按钮,接着是logo居中，然后是一段文字，接着是两个并排的图片。

• 整个HTML就设置个max-width/min-width然后margin居中，这样不会铺满。

• 适配手机，添加

  <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0" />

• 中间的logo内容居中text-align，文字用padding调整下四边距离

• 底部的两个图片的父元素用text-align。两个图片所在div分别float左边和右边

• http://122.114.72.242/jnshu/css/css3/index.html

3.关于自适应：

为了适应多种规格的屏幕，原本的px绝对大小已经不再适用。em指相对父元素的基本字体大小倍数。rem指相对页面基本字体大小的倍数（更好用）

4.task4进行：

• header: 两侧的按钮采用绝对定位，但将绝对定位的 定位上下文改为body（body的css添加position: relative），使其相对body而不是整个html定位。

• 使用媒体查询，对不同的屏幕宽度使用不同的html基础字体大小

• 设置body最大宽度720px,margin为0 auto使页面居中

• text-decoration:none 设置了各个链接，去掉超链接的下划线

• 两个图标使用行内块显示。图标右边的竖线通过先隐藏所有边框，再设置左边框的显示即可

• http://122.114.72.242/jnshu/css/css4/index.html

明天计划的事情

提交task3,4,看任务5

遇到的问题

1.两个图片浮动的时候脱离了case（当时还没有设置body的height),因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

解决是在两个图片下面放一个空的div，使用clear属性来清理，让包围元素在视觉上包围浮动元素。

收获

photoshop拾色器的使用

几种定位的区别和使用

媒体查询的使用