Vue3+Element-Plus主页Header布局设计⼆三1. Header 布局最终设计效果
2. 布局分析
3. 如何实现左右布局的⽅式
3.1 Flex 布局⽅式
左侧由⼀个⼤ DIV 组成，DIV ⾥⾯包含图⽚和⽂字
右侧直接摆放⼀个按钮
3.3 设计布局使⽤到的图⽚
1. 需要把该图⽚放在assets 静态资源⽂件夹中
2. 如图所⽰
3.2 代码编写
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/heima.png" alt="">
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
3. 保存，效果是出来了，但是页⾯还没有进⾏添加任何样式
3.4 编写页⾯样式，美化页⾯效果
1.⾸先，给header 设置⼀个Flex （弹性）布局⽅式
.el-header{
background-color: #363D40;
// 给头部设置⼀下弹性布局
display: flex;
// 让它贴标左右对齐
justify-content: space-between;
}
2. 保存刷新页⾯，头部区域就明显划分出来了。左边就是图⽚和⽂本，右边是按钮。
3. 继续编写完善头部header样式，消除图⽚左边距以及给字体设置⼤⼩和颜⾊，让右边按钮居中显⽰。
// 让它贴标左右对齐
justify-content: space-between;
/
/ 清空图⽚左侧padding
padding-left: 0;
// 按钮居中
align-items: center;
// ⽂本颜⾊
color: #fff;
// 设置⽂本字体⼤⼩
font-size: 20px;
}
4. 可以看到效果已经出来了。
5.那接下来， 我们需要设置头部⽂本在纵向居中对齐，所以需要再给左侧的⼤DIV 添加⼀个Flex （弹性布局），使⽤嵌套的⽅式进⾏添加Flex 布局
6. 代码实现
// 让它贴标左右对齐
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 组件完整事例代码
<template>
<el-container class="home_container">
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/heima.png" alt="">
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 页⾯主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右侧内容主体区域 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
methods: {
logout () {
window.sessionStorage.clear()
this.$router.push('/login')
}
}
}
</script>
<style lang="less" scoped>
.home_container{
height: 50em;
flex布局对齐方式}
.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;
}
}
}
.el-aside{
background-color: #313743;
}
.el-main{
background-color: #E9EDF1;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。