这里主要是顶部的结构、布局以及字体图标的两种用法

1 字体图标

在阿里的iconfont图标管理中心，可以根据项目需要创建在线的图标库
1.1 准备工作

• 文件目录
  将需要的文件拷贝到assets/fonts文件夹下

  
  
  image.png

• 将字体图标的样式代码拷贝到base.css中，要记得修改文件目录

  
  
  image.png
  
  

  1.2 字体图标使用的两种方法

• 类名使用

  
  
  image.png

• 字体使用

  
  
  image.png

2 首页头部样式

div.header>(a.cat+(form.search>input)+a.login)

image.png

3 首页头部布局

.header:{display:flex}
.search:{flex:1}占用剩余的全局未知
.search:{display:relative}
&::before:{display:absolute}
表示在父元素的内部前面添加元素，由于第二个元素占用的宽度已经是100%，所以要想显示，就要定位在父元素合适的未知
一般为border-radius的left，但是右边的text-index必须比两倍的border-radius多2个像素

image.png

image.png

image.png

4 组件的使用和目录结构

image.png

image.png