前端学习，软创中心（前端组）———— 百度网盘界面还原p2（接续第二节课） 第三次笔记记录

一、前言

        本篇内容接续前文的前端任务——即百度网盘界面的还原，上文中，我们已经搭建了VUE环境，以及构置了简单的网页前置框架。本文将接续上文内容，进一步对已完成内容进行完善。本篇结束后，其基本框架已经构成。

二、第一级纵标签Aside和第一级头标签Header

        1.第一级纵标签Aside
                依据上文中的分析图，我们发掘其第一级侧标签也类似于菜单栏，如下图所示。这里需要注意的是，其实实现模拟的方式不仅仅这一种，也可以使用多个按钮标签和DIV标签堆叠。但是相对麻烦，这里选择使用MENU的方式实现
 
                （1）、登录Element Plus，寻找合适的MENU菜单

                这里发现这个折叠面板相对合适作为我们的选择，我们展开其源代码，进行适当的分析，再选取合适部分复制至我们的源文件，如下图所示
这里我们发现复制进入后，其展示效果和我们想想的不太一样，如下图所示，这里是因为其参数复合的相对较多，而且没有对图标库进行相关引用，致使其显示异常，那么下一步，我们着力解决此问题

这里我们代码依据其结构组成(看相似度)分成四部分
我们发现每一部分都有E1-ICON(绿色标签)这个标签，这里对应的是图标标签，我们可以理解成，这个菜单的格子图标默认是由这里确认的。这里我们不需要，所以可以删除，为了标记这里，可以输入一个 图标X
这里再看蓝色标方形框框，这里是一个菜单二级项目组，我们这里不需要做二级目录，所以也可以直接删除
黄色标签这里可以看到是disabled的修饰，这里此修饰符表示这个菜单选项不可被选择，所以删除
蓝色画圈组这里发觉和我们复制这段代码过来后网页显示的字是一样的，这里同理，我们不需要这段表示的文字，所以删除

那么修改删减完成后 如下图所示

我们再对下其源代码中的scrip部分进行分析，这里我们只需要复制其蓝色框框就可以了，其余部分使用不到。

然后，按照分析图，我们再将Adide标签的下半部分按照相同方式进行设置。就可以得到一个模拟成功的Aside标签
这里需要注意的是，第二部分需要加一个magin-top的参数，否则两部分会胡在一起，和我们的想见到的不一样，利用此参数，可以将两个菜单盒子分离。如下图所示

这里还有一个可以说的点，Script的部分加上和不加上的区别在哪里，上面说这个的功能是实现该菜单折叠。这里我们去自己的网页打开控制台调试就可以看出差别了，如下图所示：
这里是没有加的

这里是添加的
到这里，我们完成了对第一节Aside栏的框架设置，后续只需要对图标X进行修改就可以实现完美的还原。
        1.第一级头标签Header
                和之前一样，按照分析图，可以直接发现Header部分其实只有一个图标加上五个按钮，所以同理 在Element Plus中寻找合适的参量