VueCl项目Code记录第一天(nav)

由于nav与window有间距，所以消除浏览器默认样式

@import url(./assets/util/reset.css);

---

使用语义标签

 <header> 
 <nav >
 //emment语法
 main>section  aside>section
  <footer> 

---

制作nav时，nav图标使用字体图标

@import url(./assets/font_icon/iconfont.css);

<span class="iconfont icon-shu1-copy" />

---

消除路由连接的下划线

text-decoration none

---

让nav中的文字不在window过窄时换行

white-space nowrap

---

使用动画让字体图标旋转起来

注：由于字体图标是在:before伪类中创建的，所以设置伪类样式
由于行内元素旋转无效，所以display inline-block

.icon-shezhi
      &:before
        display inline-block
		animation infinite-rotate-anima 3s infinite linear

注：虽然css预编译器能不写花括号和冒号，但是关键帧的花括号和冒号还是不能省

@keyframes infinite-rotate-anima {
  from {transform:rotate(0deg)}
  to {transform:rotate(360deg)}
}

---