2024年Web前端最全前端入门篇（四十六）JS应用1二级下拉菜单问题记录，web前端开发实战项目

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

• 联系我们

• 1.清除浮动

  为清除浮动专门设置了一个class，别忘记写after

  .clearfixed::after {

  content: “”;

  display: table;

  clear:both;

  }

  

  2.想要让菜单在页面中居中，用margin：

  .container {

  width:1200px;

  /* border:1px solid black; */

  margin: 20px auto;

  }

  

  3.只对nav-list下的子标签li有效，如果里面又嵌套了li，该样式对其无效，用子选择器.nav-list > li

  让菜单中文字有间隔，用margin：

  .nav-list > li {

  float: left;

  margin: 0 20px;

  }

  

  4.当鼠标移动到菜单上时，要求加1px边框，会导致鼠标悬浮有抖动的效果：

  css文件：

  .nav-list > li > a {

  color: #fff;

  display: block;

  height: 42px;

  line-height: 42px;

  font-size: 18px;

  padding: 0 12px;

  }

  .nav-list > li > a:hover {

  color: #bc0303;

  background-color: #fff;

  border: 1px solid #c9c9c9;

  }

  效果：

  

  讨论1：可以在a标签没有悬浮时，也添加上border，并且与菜单的背景颜色一致，同时也给a未悬浮时，上下方向上的li多加了2px

  css文件：

  .nav-list > li > a {

  color: #fff;

  display: block;

  height: 42px;

  line-height: 42px;

  font-size: 18px;

  padding: 0 12px;

  border:1px solid #808080;

  }

  

  讨论2：将底部的边框设置为none，并加高菜单的高度（从42px加为43px），遮住li边框的下边缘（毛刺）

  

  

  也将悬浮时的下边框去掉，以符合下拉菜单最终的效果

  .nav-list {

  background-color: #808080;

  height: 43px;

  }

  .nav-list > li > a {

  color: #fff;

  display: block;

  height: 42px;

  line-height: 42px;

  font-size: 18px;

  padding: 0 12px;

  border:1px solid #808080;

  border-bottom: none;

  }

  .nav-list > li > a:hover {

  color: #bc0303;

  background-color: #fff;

  border: 1px solid #c9c9c9;

  border-bottom: none;

  }

  

  二级菜单问题记录

  ---

  1.快速生成li列表，且带有a标签和内容

  ul>li*3>a>{关于蝉壳$}

  回车即可

  

  2.二级下拉菜单部分

  html文件：

• 关于蝉壳
• 关于蝉壳1
• 关于蝉壳2
• 关于蝉壳3

• 为了让鼠标悬浮在’关于蝉壳‘上时，显示出下拉菜单，并且下拉菜单被一级菜单遮住一点点，需要将二级菜单设置成浮起来的样子（使用position和z-index）

  css文件：

  .nav-list {

  background-color: #808080;

  height: 43px;

  position: relative;

  }//以一级菜单做position调整

  .nav-list > li > a {

  color: #fff;

  display: block;

  height: 42px;

  line-height: 42px;

  font-size: 18px;

  padding: 0 12px;

  前端框架

  前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

  以 Vue 为例，我整理了如下的面试题。

  

  如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】