四 · 从零开始搭建一个项目(添加顶部导航栏以及用户头像)

34 阅读1分钟

1.添加ui库menu菜单组件 ---> 简化前 image.png ---> 引入简化后

image.png 2.打开浏览器然后使用f12的元素选择会发现它并没有占满一行 ---> 会发现 它被设置了padding我们要去除他

 .el-header {
 --el-header-padding: 0 20px;
  --el-header-height: 60px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
}

image.png 3.这样就可以了

.el-header{
  padding: 0;
}

image.png

4.新添加容器用于存放头像以及下拉按钮的

image.png

5.启动项目

image.png