diff --git "a/16\351\233\267\344\277\244\345\256\235/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252&\345\221\275\345\220\215\350\247\206\345\233\276.md" "b/16\351\233\267\344\277\244\345\256\235/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252&\345\221\275\345\220\215\350\247\206\345\233\276.md"
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..39a36ef8cc89adc7ad3922f306739c0afeacb491 100644
--- "a/16\351\233\267\344\277\244\345\256\235/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252&\345\221\275\345\220\215\350\247\206\345\233\276.md"
+++ "b/16\351\233\267\344\277\244\345\256\235/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252&\345\221\275\345\220\215\350\247\206\345\233\276.md"
@@ -0,0 +1,216 @@
+## 一、编程式导航
+### Black.vue
+```html
+<!-- <script setup>    
+
+</script>
+
+<template>
+ <div  id="Blcak"></div>
+ <h1>Black</h1>
+ <RouterView></RouterView>
+</template>
+
+
+<style scoped>
+    #Black {
+        background-color: black;
+        width: 250px;
+        height:250px;
+    }
+  </style> -->
+```
+
+### Blue.vue
+```html
+<!-- <script setup>    
+
+</script>
+
+<template>
+ <div  id="Blue"></div>
+ <h1>Bule</h1>
+ <RouterView></RouterView>
+</template>
+
+
+<style scoped>
+    #Blue {
+        background-color: blue;
+        width: 250px;
+        height:250px;
+    }
+  </style> -->
+```
+
+### HelloWorld.vue
+```html
+<!-- <script>
+export default {
+  created(){
+
+  },
+  methods: {
+    abc(){
+      console.log(333);
+      this.$router.replace({name:'xy',params:{friends:'88'}})
+    }
+
+  }
+}
+</script>
+
+<template>
+  <input type="button" value="跳一跳" @click="abc">
+</template>
+
+
+<style scoped>
+  #Blue {
+      background-color: blue;
+      width: 250px;
+      height:250px;
+  }
+</style> -->
+
+
+<script>
+
+</script>
+
+<template>
+  
+</template>
+```
+
+### NavBar.vue
+```html
+<template>
+    <div id="nav">
+       <RouterLink to="/setting/email">邮箱设置</RouterLink>
+       <br>
+       <RouterView to="/setting/profile">用户中心</RouterView>
+    </div>
+</template>
+```
+
+## 二、命名试图
+### UserEmail.vue
+```html
+<template>
+    <div id="email">
+        电子邮箱
+    </div>
+</template>
+```
+
+### UserEmailSub.vue
+```html
+<template>
+    <div>
+        电子设备邮箱
+    </div>
+   
+</template>
+```
+
+### Userprofile.vue
+```html
+<template>
+    <div id="Preview">
+        电子设备预览
+    </div>
+</template>
+```
+
+### UserSetting.vue
+```html
+<template>
+    <div>
+        用户设置
+        <nav-bar></nav-bar>
+        <RouterView></RouterView>
+        <RouterView name="helper"></RouterView>
+    </div>
+</template>
+
+<script setup>
+    import NavBar from './NavBar.vue'
+</script>
+```
+
+### App.vue
+```html
+<script setup>
+import HelloWorld from './components/HelloWorld.vue';
+
+</script>
+
+<template>
+<!-- <HelloWorld /> -->
+<!-- 记住了，页面什么也没显示就是这里没加<RouterView></RouterView> -->
+<RouterView></RouterView>   
+</template>
+```
+
+### main.js
+```js
+// import { createApp } from 'vue'
+// import App from './App.vue'
+// import Black from './components/Black.vue'
+// import Blue from './components/Blue.vue'
+// import HelloWorld from './components/HelloWorld.vue'
+// import {createRouter,createWebHistory} from 'vue-router'
+// import './assets/main.css'
+
+// const routes=[
+//     {path:'/abc/:name?',component:HelloWorld },
+//     {path:'/aac',component:Black },
+//     {path:'/bbc/:friends?',name:'xy',component:Blue },
+// ]
+ 
+// const router=createRouter({
+//     history:createWebHistory(),
+//     routes
+// })
+
+// createApp(App).use(router).mount('#app')
+
+
+
+ import { createApp } from 'vue'
+ import App from './App.vue'
+ import UserSetting from './components/UserSetting.vue'
+ import UserEmailSub from './components/UserEmailSub.vue'
+ import UserEmail from './components/UserEmail.vue'
+ import Userprofile from './components/Userprofile.vue'
+ import {createRouter,createWebHistory} from 'vue-router'
+ import './assets/main.css'
+const routes=[
+    { path:'/',component:UserSetting },
+  { path:'/setting',component:UserSetting,
+    children:[
+        {
+            path:'email',
+            component:UserEmailSub
+        },
+        {
+            path:'profile',
+            components:{ 
+                default:UserEmail,
+                helper:Userprofile
+            } 
+               
+
+            
+        }
+    ] }
+]
+ 
+const router=createRouter({
+    history:createWebHistory(),
+    routes
+})
+
+createApp(App).use(router).mount('#app')
+```
\ No newline at end of file
diff --git "a/16\351\233\267\344\277\244\345\256\235/20230504\350\217\234\345\215\225\346\240\217\351\253\230\345\272\246\350\207\252\351\200\202\345\272\224.md" "b/16\351\233\267\344\277\244\345\256\235/20230504Element\350\217\234\345\215\225\346\240\217\351\253\230\345\272\246\350\207\252\351\200\202\345\272\224.md"
similarity index 100%
rename from "16\351\233\267\344\277\244\345\256\235/20230504\350\217\234\345\215\225\346\240\217\351\253\230\345\272\246\350\207\252\351\200\202\345\272\224.md"
rename to "16\351\233\267\344\277\244\345\256\235/20230504Element\350\217\234\345\215\225\346\240\217\351\253\230\345\272\246\350\207\252\351\200\202\345\272\224.md"
diff --git "a/16\351\233\267\344\277\244\345\256\235/20230505\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md" "b/16\351\233\267\344\277\244\345\256\235/20230505Element\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md"
similarity index 100%
rename from "16\351\233\267\344\277\244\345\256\235/20230505\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md"
rename to "16\351\233\267\344\277\244\345\256\235/20230505Element\345\260\201\350\243\205\350\217\234\345\215\225\346\240\217.md"
diff --git "a/16\351\233\267\344\277\244\345\256\235/20230508Element\345\233\276\346\240\207icon\346\227\213\350\275\254.md" "b/16\351\233\267\344\277\244\345\256\235/20230508Element\345\233\276\346\240\207icon\346\227\213\350\275\254.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/16\351\233\267\344\277\244\345\256\235/20230509-Element-Menu\347\232\204\350\276\271\346\241\206\350\256\276\347\275\256.md" "b/16\351\233\267\344\277\244\345\256\235/20230509-Element-Menu\347\232\204\350\276\271\346\241\206\350\256\276\347\275\256.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7e8c4bb0d7a72e380f67619d3f3a062f258b20b7
--- /dev/null
+++ "b/16\351\233\267\344\277\244\345\256\235/20230509-Element-Menu\347\232\204\350\276\271\346\241\206\350\256\276\347\275\256.md"
@@ -0,0 +1,24 @@
+# Menu 菜单
+
+* 为网站提供导航功能的菜单。
+
+1. 顶栏
+2. 左右
+3. 侧栏
+4. 折叠面板
+
+# Menu Attributes
+
+* 属性名：collapse  说明：是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）  类型：boolean   默认值：false
+* 属性名：text-color    说明：字体颜色
+* 属性名:active-text-color  说明：选中菜单栏时字体颜色
+* 属性名：index 说明：唯一标志	
+* 插槽名：title 说明：自定义标题内容
+* 事件名：click 说明：点击菜单时的回调函数
+
+# Menu的border-size
+```
+.el-menu{
+    border-size:solid 1px '选择合适的颜色'
+}
+```
diff --git "a/16\351\233\267\344\277\244\345\256\235/20230511Layout\345\270\203\345\261\200.md" "b/16\351\233\267\344\277\244\345\256\235/20230511Layout\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6e32076871712d02f4cb818a0d529d20100de96a
--- /dev/null
+++ "b/16\351\233\267\344\277\244\345\256\235/20230511Layout\345\270\203\345\261\200.md"
@@ -0,0 +1,111 @@
+# Layout 布局
+通过基础的 24 分栏，迅速简便地创建布局。
+
+## TIP
+
+组件默认使用 Flex 布局，不需要手动设置 type="flex"。
+请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。
+
+## 基础布局
+使用列创建基础网格布局。
+通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
+
+## 分栏间隔
+支持列间距。
+行提供 gutter 属性来指定列之间的间距，其默认值为0。
+
+## 混合布局
+通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
+
+## 列偏移
+您可以指定列偏移量。
+通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
+
+## 对齐方式
+默认使用 flex 布局来对分栏进行灵活的对齐。
+您可以通过justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。
+
+## 响应式布局
+参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
+
+## 基于断点的隐藏类
+Element Plus 额外提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要，请自行引入以下文件：
+
+import 'element-plus/theme-chalk/display.css'
+这些类名为：
+
+- hidden-xs-only 当视口在 xs 尺寸时隐藏
+- hidden-sm-only 当视口在 sm 尺寸时隐藏
+- hidden-sm-and-down 当视口在 sm 及以下尺寸时隐藏
+- hidden-sm-and-up 当视口在 sm 及以上尺寸时隐藏
+- hidden-md-only 当视口在 md 尺寸时隐藏
+- hidden-md-and-down 当视口在 md 及以下尺寸时隐藏
+- hidden-md-and-up 当视口在 md 及以上尺寸时隐藏
+- hidden-lg-only 当视口在 lg 尺寸时隐藏
+- hidden-lg-and-down 当视口在 lg 及以下尺寸时隐藏
+- hidden-lg-and-up 当视口在 lg 及以上尺寸时隐藏
+- hidden-xl-only 当视口在 xl 尺寸时隐藏
+## Row API
+## Row Attributes
+属性名	说明	类型	默认值
+gutter	栅格间隔	
+number
+0
+justify	flex 布局下的水平排列方式	
+enum
+start
+align	flex 布局下的垂直排列方式	
+enum
+top
+tag	自定义元素标签	
+string
+div
+## Row Slots
+插槽名	说明	子标签
+default	自定义默认内容	Col
+## Col API
+## Col Attributes
+属性名	说明	类型	默认值
+span	栅格占据的列数	
+number
+24
+offset	栅格左侧的间隔格数	
+number
+0
+push	栅格向右移动格数	
+number
+0
+pull	栅格向左移动格数	
+number
+0
+xs	<768px 响应式栅格数或者栅格属性对象	
+number
+ / 
+object
+—
+sm	≥768px 响应式栅格数或者栅格属性对象	
+number
+ / 
+object
+—
+md	≥992px 响应式栅格数或者栅格属性对象	
+number
+ / 
+object
+—
+lg	≥1200px 响应式栅格数或者栅格属性对象	
+number
+ / 
+object
+—
+xl	≥1920px 响应式栅格数或者栅格属性对象	
+number
+ / 
+object
+—
+tag	自定义元素标签	
+string
+div
+## Col Slots
+插槽名	说明
+default	自定义默认内容
\ No newline at end of file
diff --git "a/16\351\233\267\344\277\244\345\256\235/20230512Menu\350\217\234\345\215\225.md" "b/16\351\233\267\344\277\244\345\256\235/20230512Menu\350\217\234\345\215\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..101787afbda8345e0869261dcc7fdf92d3a99cf6
--- /dev/null
+++ "b/16\351\233\267\344\277\244\345\256\235/20230512Menu\350\217\234\345\215\225.md"
@@ -0,0 +1,114 @@
+# Menu 菜单
+为网站提供导航功能的菜单。
+
+TIP
+
+在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).
+
+## 顶栏
+顶部栏菜单可以在各种场景中使用。
+
+导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外，在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
+
+- Processing Center
+- Workspace
+- Info
+- Orders
+- Processing Center
+- Workspace
+- Info
+- Orders
+
+# 左右
+您可以将菜单项放置在左边或右边。
+
+LOGO
+Processing Center
+Workspace
+
+# 侧栏
+垂直菜单，可内嵌子菜单。
+
+通过 el-menu-item-group 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定，也可以通过具名 slot 来设定。
+
+- Default colors
+- Navigator One
+- Navigator Two
+- Navigator Three
+- Navigator Four
+- Custom colors
+- Navigator One
+- Navigator Two
+- Navigator Three
+- Navigator Four
+
+# Collapse 折叠面板
+垂直导航菜单可以被折叠
+
+
+
+
+# Menu Attributes
+- 属性名	说明	类型	可选值	默认值
+- mode	菜单展示模式	string	horizontal / vertical	vertical
+- collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	—	false
+- ellipsis	是否省略多余的子项（仅在横向模式生效）	boolean	—	true
+- background-color	菜单的背景颜色（十六进制格式）（已被废弃，使用--bg-color）	string	—	#ffffff
+- text-color	文字颜色（十六进制格式）（已被废弃，使用--text-color）	string	—	#303133
+- active-text-color	活动菜单项的文本颜色（十六进制格式）（已被废弃，使用--active-color）	string	—	#409EFF
+- default-active	页面加载时默认激活菜单的 index	string	—	—
+- default-openeds	默认打开的 sub-menu 的 index 的数组	Array	—	—
+- unique-opened	是否只保持一个子菜单的展开	boolean	—	false
+- menu-trigger	子菜单打开的触发方式，只在 mode 为 horizontal 时有效。	string	hover / click	hover
+- router	是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。	- boolean	—	false
+- collapse-transition	是否开启折叠动画	boolean	—	true
+- popper-effect	Tooltip 主题，内置了 dark / light 两种主题	string	dark / light	dark
+- Menu Methods#
+方法名	说明	参数
+- open	展开指定的 sub-menu	index: 需要打开的 sub-menu 的 index
+- close	收起指定的 sub-menu	index: 需要收起的 sub-menu 的 index
+## Menu Events
+- 事件名	说明	回调参数
+- select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path, item: 选中菜单项, routeResult: vue-router 的返回值（如果 router 为 true）
+- open	sub-menu 展开的回调	index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index path
+- close	sub-menu 收起的回调	index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path
+## Menu Slots
+插槽名	说明	子标签
+—	自定义默认内容	SubMenu / Menu-Item / Menu-Item-Group
+## SubMenu Attributes
+- 属性名	说明	类型	可选值	默认值
+- index	唯一标志	string	—	—
+- popper-class	为 popper 添加类名	string	—	—
+- show-timeout	展开 sub-menu 的延时	number	—	300
+- hide-timeout	收起 sub-menu 的延时	number	—	300
+- disabled	是否禁用	boolean	—	false
+- popper-append-to-body（已废弃）	是否将弹出菜单插入至 body 元素。 在菜单的定位出现问题时，可尝试修改该属性	boolean	—	一级子菜单：true / 非一级子菜单：false
+- teleported	是否将 popup 的下拉列表插入至 body 元素	boolean	—	一级子菜单：true / 非一级子菜单：false
+- popper-offset	弹出窗口偏移	number	—	6
+- expand-close-icon	父菜单展开且子菜单关闭时的图标， expand-close-icon 和 expand-open-icon 需要一起配置才能生效	string | Component	—	—
+- expand-open-icon	父菜单展开且子菜单打开时的图标， expand-open-icon 和 expand-close-icon 需要一起配置才能生效	string | Component	—	—
+- collapse-close-icon	父菜单收起且子菜单关闭时的图标， expand-close-icon 和 expand-open-icon 需要一起配置才能生效	string | Component	—	—
+- collapse-open-icon	父菜单收起且子菜单打开时的图标， expand-open-icon 和 expand-close-icon 需要一起配置才能生效	string | Component	—	—
+## SubMenu Slots#
+- 插槽名	说明	子标签
+- —	自定义默认内容	SubMenu / Menu-Item / Menu-Item-Group
+title	自定义标题内容	—
+## Menu-Item Attributes
+- 属性名	说明	类型	可选值	默认值
+- index	唯一标志	string/null	—	null
+- route	Vue Router 路径对象	object	—	—
+- disabled	是否禁用	boolean	—	false
+## Menu-Item Events
+- 事件名	说明	回调参数
+- click	菜单点击时的回调函数	el-menu-item 实例
+## Menu-Item Slots
+- 插槽名	说明
+- —	自定义默认内容
+title	自定义标题内容
+## Menu-Item-Group Attributes
+- 属性名	说明	类型	可选值	默认值
+- title	组标题	string	—	—
+## Menu-Item-Group Slots
+- 插槽名	说明	子标签
+- —	默认插槽内容	Menu-Item
+- title	自定义组标题内容	—
\ No newline at end of file