这里主要是顶部的结构、布局以及字体图标的两种用法
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
网友评论