任务3日报

1.先思考布局 图例目标 葡萄藤logo，后退icon大小和位置不随窗口变化改变，文字和两个图标距离不发生改变，两个小图标垂直位置，大小没有改变，与下方文字距离不发生改变，两个小图标之间距离随着宽度变化，文字宽度随屏幕宽度变化而变化，字体大小不随宽度变化而变化

2.尝试了2种思路 

第一种页面整体分为两块 中间一大块div 宽度占屏幕80%自适应 一小块盒子做后退图片 用absolute根据body定位。中间大盒子relative中，居中。大盒子中间制作4个小盒子葡萄糖logo，文字，两个图标和文字 absolute相对大盒子定位。所有小盒子不设置大小有内容撑起盒子高

第二种页面分为三个部分，后退图标使用绝对定位，定位在页面左上角，中间部分设置2个大盒子，上面大盒子用来容纳葡萄糖logo，大盒子设置line-height和text-align使葡萄糖logo居中。下面大盒子分为两个盒子一个文字，一个图标。大盒子设置width 70% height70vh。文字盒子height 60%

图标盒子里用ul li 使两个小图标li float left right。所有盒子必须设置高 

两个方法不同在于，第一个用定位方法所有盒子不设置高，第二个用盒子的高vh固定所有盒子距离

提交后被师兄拒绝。师兄说右下图标超过文字。因为文字在大屏幕情况下不能够占满一行，但是右下图标位置固定，所以目前也不知道怎么解决。是否要根据屏幕大小临界设置不同css

<meta name="viewport" content="width=device-width, initial-scale=1.0">

自适应必须，否则内容将会根据屏幕大小变化而变化

float和position：absolute元素无法用margin 0auto居中

img/p 可以用line-height=height居中