首先是第一张页面中间的图片没给高导致变形，加了高之后就解决了，header部分开始时多了一块出来

，开始时一直没弄明白是怎么回事，任务8就出现过这种问题，但是用了bootstrap之后多出的部分就没了，所以一直也不知道咋回事，这次不让用bootstrap，经过研究终于找到了原因，我们的盒子模型叫做标准盒子模型，他的width是不算padding和border的，我的width设置成了100%，再加上设置的padding总长度就超过了100%了，所以会出现蹭破盒子的情况出现。解决方法，‍‍‍‍加一个box-sizing:‍‍ ‍‍border-box‍‍;属性就可以了，box-sizing: border-box;属性就是把标准盒子变成IE盒子，IE盒子的width是把padding和border都算在内的，所以width：100%就包含了padding，突出部分就没了，。

第二张页面是要写一个导航出来，开始时很懵，并不知道怎么写，后来在官网查找资料有经过师兄的提醒才知道要用:checked伪类和兄弟选择器一起用才能写出来。首先图形用input标签写出来，因为input标签样式不好改，所以要用label标签修改再把input标签吟唱起来，label标签是一个关联标签，用for和id属性把它与另一个元素绑定关联，之后‍‍在 label 元素内点击文本，就会触发此控件，‍‍就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的元素上。:checked伪类的说明是‍‍匹配用户界面上处于选中状态的元素，常用于‍‍input type为radio与checkbox时，首先设置label改变样式在原来的样式隐藏掉在设置

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍input[type="checkbox"]:checked ~ .menu‍‍ ｛display：black｝属性，就是说当input处于被选中状态时导航出现，。‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‍