diff --git "a/07\351\231\210\344\277\212\345\205\264/20230504-\351\241\265\351\235\242\345\270\203\345\261\200.md" "b/07\351\231\210\344\277\212\345\205\264/20230504-\351\241\265\351\235\242\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ff8b5eb818bafaabc547071f30e84bff201e8861
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230504-\351\241\265\351\235\242\345\270\203\345\261\200.md"
@@ -0,0 +1,109 @@
+# el 布局
+
+## 一.Container 布局容器
+
++ <**el-container**>：外层容器。 当子元素中包含 <**el-header**> 或 <**el-footer**> 时，全部子元素会垂直上下排列， 否则会水平左右排列。
+
++ <**el-header**>：顶栏容器。
+
++ <**el-aside**>：侧边栏容器。
+
++ <**el-main**>：主要区域容器。
+
++ <**el-footer**>：底栏容器
+
++ 在 <**style scopend**> 中，设置 **height:calc(100vh)** 可以使样式自适应撑开
+
+```vue
+<template>
+  <div>
+    <!-- el-container 外层容器。 -->
+  <el-container>
+    <!-- 侧边栏容器 -->
+    <el-aside class="aside"><Nav></Nav></el-aside>
+    <el-container>
+      <!-- 顶栏容器 -->
+      <el-header class="header">Header</el-header>
+      <!-- 主要区域容器 -->
+      <el-main class="main">
+        <RouterView></RouterView>
+      </el-main>
+      <!-- 底栏容器 -->
+      <el-footer class="footer">Footer</el-footer>
+    </el-container>
+  </el-container>
+  </div>
+</template>
+<script setup>
+import Nav from './Nav.vue'
+</script>
+<style scopend>
+/* 测边栏的样式 */
+.aside{
+  background-color: rgb(163, 214, 104);
+  /* 自适应 */
+  height: calc(100vh);
+}
+/* 顶栏样式 */
+.header{
+  background-color: aqua;
+}
+/* 底栏样式 */
+.footer{
+  background-color: rgb(82, 72, 72);
+  height: 500px;
+}
+</style>
+```
+
+![1](./img/230504/1.png)
+
+## el-menu 导航栏设置
+
++ <**el-menu-item-group**> 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定，也可以通过具名 slot 来设定。
+
+```vue
+<template>
+
+        <h5>导航栏</h5>
+    <el-menu>
+        <el-sub-menu index="1">
+            <!-- 可以在下拉框的头显示 -->
+            <template #title>
+                <span>路由导航</span>
+            </template>
+            
+            <el-menu-item-group title="路由">
+            <el-menu-item index="1-1" @click="fn">Users</el-menu-item>
+            <el-menu-item index="1-2" @click="fns">Student</el-menu-item>
+          </el-menu-item-group>
+        </el-sub-menu>
+
+        <el-menu-item index="2">
+            <span>
+                <RouterLink to="/users">Users</RouterLink>
+            </span>
+        </el-menu-item>
+
+        <el-menu-item index="3">
+            <span>
+                <RouterLink to="/student">Student</RouterLink>
+            </span>
+        </el-menu-item>
+    </el-menu>
+    
+</template>
+
+<script setup>
+import {useRouter} from 'vue-router'
+const router=useRouter();
+const fn=function(){
+    router.push({path:'/users'})
+}
+const fns=function(){
+    router.push({path:'/student'})
+}
+</script>
+```
+
+![2](./img/230504/2.png)
diff --git "a/07\351\231\210\344\277\212\345\205\264/20230505-\345\257\274\350\210\252\346\240\217\345\260\201\350\243\205.md" "b/07\351\231\210\344\277\212\345\205\264/20230505-\345\257\274\350\210\252\346\240\217\345\260\201\350\243\205.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b6188ad44452bff8c7a6550d22d81a0b9eed3eb0
--- /dev/null
+++ "b/07\351\231\210\344\277\212\345\205\264/20230505-\345\257\274\350\210\252\346\240\217\345\260\201\350\243\205.md"
@@ -0,0 +1,139 @@
+# 导航栏的封装
+
+## 标签
+
++ 最外面一层是由 <**el-menu**> <**/el-menu**> 标签 包裹
+
++ 一级导航栏: 用 <**el-menu-item**> <**/el-menu-item**> 标签 包裹
+
++ 一级导航栏下的子导航栏:用 <**el-sub-menu**><**/el-sub-menu**> 标签包裹
+
++ <**el-menu-item-group**> 组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定
+
++ 根据 index 可以限制收起和展开
+
+#
+
+## 代码
+
++ Nav.vue(封装的文件)
+
+```vue
+<template>
+    <div>
+        <el-menu>
+            <template v-for="menu of menus">
+                <!-- 判断是否有嵌套 -->
+                <!-- 
+                    @open：展开对应的 index 
+                    @close: 关闭对应的 index
+
+                    有对应的index 也可以控制展开和关闭
+                 -->
+                <el-sub-menu 
+                    v-if="menu.children && menu.children.length>0"
+                    :index="i++"
+                >
+                    <template #title>
+                        <span>{{ menu.title }}</span>
+                    </template>
+                    <!-- 因为里面有嵌套，所以继续执行该组件 -->
+                    <Navs :menus="menu.children"></Navs>
+                </el-sub-menu>
+
+                <!-- 没有嵌套执行 -->
+                <el-menu-item v-else>
+                    {{ menu.title }}
+                </el-menu-item>
+            </template>
+        </el-menu>
+    </div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+
+// 设置一个判断收起和展开的变量
+const i=ref(0)
+
+// 将变量抛出
+const props=defineProps(['menus'])
+</script>
+```
+
++ Home.vue
+
+```vue
+<template>
+    <div>
+        <el-container>
+            <!-- 侧边栏 -->
+            <el-aside>
+                <!-- <Nav></Nav> -->
+                <Navs :menus="menus"></Navs>
+            </el-aside>
+
+            <!-- 容器 -->
+            <el-container>
+                <!-- 顶栏 -->
+                <el-header class="el-header"></el-header>
+
+                <!-- 主内容 -->
+                <el-main></el-main>
+
+                <!-- 底栏 -->
+                <el-footer class="el-footer"></el-footer>
+            </el-container>
+        </el-container>
+    </div>
+</template>
+<script setup>
+import Nav from './Nav.vue';
+import Navs from './Nav/Navs.vue';
+
+const menus = [
+    {
+        title: '炸类',
+        children: [
+            {
+                title: '炸鸡腿'
+            }, {
+                title: '炸鸡'
+            }
+        ]
+    }, {
+        title: '火锅'
+    }, {
+        title: '饮料',
+        children: [
+            {
+                title: '可乐'
+            }, {
+                title: '咖啡',
+                children: [
+                    {
+                        title: '拿铁咖啡'
+                    }, {
+                        title: '卡布奇若'
+                    }
+                ]
+            }
+        ]
+    }
+]
+</script>
+<style scoped>
+.el-aside{
+    background-color: aqua;
+    height: calc(100vh);
+}
+.el-header{
+    background-color: blue;
+}
+.el-footer{
+    background-color: yellow;
+}
+</style>
+```
+
+![1](./img/230505/1.png)