Vue3+Element-Plus 主页Header布局设计 二三

1. Header 布局最终设计效果

 2. 布局分析

 3. 如何实现左右布局的方式

3.1 Flex 布局方式

• 左侧由一个大 DIV 组成，DIV 里面包含图片和文字
• 右侧直接摆放一个按钮

3.3 设计布局使用到的图片

1. 需要把该图片放在assets 静态资源文件夹中

 2. 如图所示

 3.2 代码编写

      
        

          
          电商后台管理系统
        
        退出
      

 3. 保存，效果是出来了，但是页面还没有进行添加任何样式

3.4 编写页面样式，美化页面效果 

1.首先,给header 设置一个Flex （弹性）布局方式

.el-header{
background-color: #363D40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
}

2. 保存刷新页面，头部区域就明显划分出来了。左边就是图片和文本，右边是按钮。

 3. 继续编写完善头部header样式，消除图片左边距以及给字体设置大小和颜色，让右边按钮居中显示。

.el-header{
background-color: #363D40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
// 清空图片左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// 文本颜色
color: #fff;
// 设置文本字体大小
font-size: 20px;

}

4. 可以看到效果已经出来了。 

 5.那接下来， 我们需要设置头部文本在纵向居中对齐，所以需要再给左侧的大DIV 添加一个Flex （弹性布局），使用嵌套的方式进行添加Flex 布局

6. 代码实现

.el-header{
background-color: #363D40;
// 给头部设置一下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
// 清空图片左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// 文本颜色
color: #fff;
// 设置文本字体大小
font-size: 20px;
// 嵌套
> div{
  // 弹性布局
display: flex;
// 纵向上居中对齐
align-items: center;
// 给文本和图片添加间距，使用类选择器
span{
  margin-left: 15px;
}
}

}

7. 最终页面效果

4. Home.vue 组件完整事例代码

以上出自：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=31