9-首頁頭部

這裏主要是頂部的結構、佈局以及字體圖標的兩種用法

1 字體圖標

在阿里的iconfont圖標管理中心，可以根據項目需要創建在線的圖標庫
1.1 準備工作

• 文件目錄
  將需要的文件拷貝到assets/fonts文件夾下

  
  

• 將字體圖標的樣式代碼拷貝到base.css中，要記得修改文件目錄

  
  
  

  1.2 字體圖標使用的兩種方法

• 類名使用

  
  

• 字體使用

  
  

2 首頁頭部樣式

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

3 首頁頭部佈局

.header:{display:flex}
.search:{flex:1}佔用剩餘的全局未知
.search:{display:relative}
&::before:{display:absolute}
表示在父元素的內部前面添加元素，由於第二個元素佔用的寬度已經是100%，所以要想顯示，就要定位在父元素合適的未知
一般爲border-radius的left，但是右邊的text-index必須比兩倍的border-radius多2個像素

4 組件的使用和目錄結構