开头引入的各类文件重点：[为能够改变i标签字体大小，index.css放在iconfont.css下]

头部header

• 在设置了内外边距、边框的情况下不改变原本设置的宽度：怪异盒模型
• 渐变色：background-image（x%-y%）百分之几到几颜色由浅到深
• 此处角度为：倾斜渐变

  

display：flex一般适用于移动端 自适应

• flex:1剩下的部分分为一份 前提是一部分是先固定了宽高，那么剩下的部分占据剩下的一份，且自适应大小。
• 不是所有都需要设置宽高

  

• iconfont图标是作为文字引入 改变其样式与改变文字的写法一样

  

广告部分banner

• banner设置了弹性盒模display：flex所以自动水平布局
• 为使两行文字上下分布 因此p标签外层设置一个div

  

• 按钮为行级元素 设置宽高时先变成行级块元素

  

导航条nav

• 设置display：flex时,水平布局（通常移动端使用） 为使出现两行布局如图一，使用flex-wrap：wrap，意为文本多行分布nowrap为单行

  

  

给nav添加下边框

大小为0.5px

位置可以再设置定位来移动

• （法一）
• • 增加伪元素 设置内容为空增加像素为1px的边框 再缩小0.5倍沿着竖直方向

    

• （法二）
• • 增加伪元素 设置内容为空，块级元素，设置宽度，高度为1px 再缩小0.5倍沿着竖直方向。

• 面对大小不一的字时可以使用伪元素的方法

  

• 此时内容不为空