今天完成的事情：

1.完成任务8、 9 首页  

明天计划的事情：

完成剩下的页面，提交任务8,9

遇到的问题：

收获：

1.响应式

响应式布局主要使用：流式布局、媒体查询，viewport来达成。

流式布局：主要是使用相对视窗宽度这种灵活的单位，当改变浏览器宽度时元素也随之改变，动态调整适应任何宽度

媒体查询：一种是在html元素中使用media属性   media = “all and （max-width：500px）” ，一种是在css中使用：@meida all and （max-width：500px）{...}

也可在css使用@import url （xxx.css）all and （max-width：500px）{...}但是要多次发送http请求，最好不要使用。

其中，all是媒体类型。媒体类型有很多：

所有(all)，屏幕（screen），打印（print），电视（tv）和盲文（braille）

其中我们常用的媒体类型是screen（屏幕），主要是使用屏幕大小，本次任务我就在css使用了

@media screen and (max-width: 500px) {

    .human {

        justify-content: center;

    }

}

来控制当宽度小于500px（也适用于手机端）时，元素的布局。

媒体查询表达式可能包含不同的媒体属性和属性值，然后分配是真还是假。当一个媒体属性和值都为真时，应用样式，否则忽略样式。

在媒体查询中有三个不同的逻辑运算符，分别是与(and)，非（not）和唯一（only）。

资料来源：https://www.w3cplus.com/css/advanced-html-css-lesson4-responsive-web-design.html

2.首页

body 

flex布局column方向，最小高度100vh。

header、footer flex：0 0 定高px；main flex：1 0 auto；

设置* box-sizing：border-box，之后需要再改相应元素css

header

top条：flex布局justify-content：space-between，header设置左右内边距

导航：ul设置无样式，设置flex布局且justify-content：flex-end

自适应: 将导航外套的盒子加上背景图片，设置position：absolute   【这是因为这个父盒子必须足够高才能在hover状态显示出下拉列表，如果还在文档流就会撑大header元素】再设置hover时下拉列表display：none更改显示。

轮播图：套了boostarp框架，之后学js再好好看

main-1

自适应：更改flex布局的方向，后面大致一样