简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿电商平台导航栏下拉菜单的实战
Blogger Information
Blog 13
fans 2
comment 0
visits 10324
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿电商平台导航栏下拉菜单的实战
北纬38
Original
851 people have browsed it

仿电商平台导航栏下拉菜单的实战

1.HTML、CSS、JavaScript 的角色

HTML：描述网页的内容。
CSS：描述网页的样式
JavaScript：描述网页的行为

2.实战效果图


3.代码部分

HTML代码部分：(位于body部分编写)

  1. <body>
  2.     <ul id="nav">
  3.         <li><a href="">首页</a></li>
  4.         <li><a href="">手机</a>
  5.         <ul>
  6.             <li><a href="">苹果</a></li>
  7.             <li><a href="">华为</a></li>
  8.             <li><a href="">OPPO</a></li>
  9.             <li><a href="">魅族</a></li>
  10.         </ul>
  11.         <li><a href="">电脑办公</a></li>
  12.         <li><a href="">酒水饮料</a>
  13.         <ul>
  14.             <li><a href="">白酒</a></li>
  15.             <li><a href="">果酒</a></li>
  16.             <li><a href="">啤酒</a></li>
  17.             <li><a href="">红酒</a></li>
  18.         </ul>
  19.         </li>
  20.         <input type="text" name="username" >
  21.     </ul>
  22. </body>

CSS代码部分（位于head部分的style标签编写）

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>仿电商导航栏下拉菜单</title>
  5.     <style>
  6.         /* 元素样式初始化*/
  7.       * {margin: 0; padding: 0; box-sizing: border-box;}
  8.       /* 设置a标签的背景颜色、去掉下划线、字体大小和系列 */
  9.       a {color: rgba(47, 0, 255, 0.671); text-decoration: none; font-size: large; font-family: STHUPO, Helvetica, sans-serif;}
  10.         /* 设置导航条的背景色、高度，内容垂直居中 */
  11.       #nav {background-color: orange; height: 50px; line-height: 50px;}
  12.       /* 列表标记、设置各列表间距、浮动 */
  13.       li {list-style: none;; margin: 0 30px; float: left;}
  14.         /* 设置文本移动到光标的字体颜色，高亮显示 */
  15.       #nav > li > a:hover {color: firebrick;}
  16.       /* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
  17.       #nav > li {position: relative;}
  18.         /* 设置子菜单的显示和背景色 */
  19.       #nav > li > ul {position: absolute; top: 60px; width: 200px; border: 2px solid green; border-top: none;}
  20.             /* 设置子菜单的字体高度和颜色 */
  21.       #nav > li > ul > li a {display: inline-block; height: 60px; color: greenyellow;}
  22.       ul.sub li:hover {background-color: greenyellow;}
  23.       /* 初始化时隐藏显示子菜单 */
  24.       #nav > li > ul {display: none;}
  25.     </style>
  26. </head>

JavaScript代码部分（结束标签之前单独编写）

  1. <script>
  2.     //   获取所有的主导航
  3.     const navs = document.querySelectorAll("#nav > li");
  5.     navs.forEach(function (nav) {
  6.       // 鼠标移入时: 显示子菜单
  7.       nav.addEventListener("mouseover", showSubMenu);
  8.       // 鼠标移出时: 关掉子菜单
  9.       nav.addEventListener("mouseout", closeSubMenu);
  10.     });
  12.     // 显示子菜单的函数
  13.     function showSubMenu(ev) {
  14.       console.log(ev.target);
  15.       // 判断有没有子菜单?
  16.       if (ev.target.nextElementSibling !== null) {
  17.         ev.target.nextElementSibling.style.display = "block";
  18.       }
  19.     }
  20.     // 隐藏子菜单
  21.     function closeSubMenu(ev) {
  22.       //关闭子菜单
  23.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  24.         ev.target.nextElementSibling.style.display = "none";
  25.       }
  26.     }
  27. </script>

4.实战中HTML、CSS、JavaScript的知识点

HTML列表知识：

  • 有序列表：ol标签定义，li标签定义列表项 type属性排序
  • 无序列表：ul标签定义，li标签定义列表项 type属性默认disc属性 。 circle 、squar
  • 自定义列表：dl标签定义，dt标签自定义列表项目 dd标签自定义列表项目的定义。

CSS样式知识

  • 内联样式：只针对当前标签 写法：<标签 style=”CSS属性：属性值；”>
  • 内部样式：只针对当前页面写法：在head元素内部 标签名{属性：属性值；}
  • 元素选择器：类别选择器：（一定要有.）、ID选择器：（#）、 后代选择器、子元素选择器。
  • css中的伪类：锚伪类：（未被访问状态、已被访问状态、鼠标悬停状态、活动状态）
  • CSS中的文本控制（style内部样式里面写，谁要怎么变就给谁赋值）

    5.对CSS定位、JavaScript事件的理解

  • 相对定位：参照自己本身。
  • 绝对定位：参照自己本身之外的。
  • 事件：文档或浏览器中发生的特定交互瞬间。

    6.总结

前几天对基础知识了解较少，在课程中不太明白老师讲的，周末自己恶补完了HTML和CSS的基础知识，JavaScript的知识还没有学完，总结下来：
HTML是在body部分写你所需要的内容，可以进行层层嵌套；
CSS就是在head部分style标签里面给你的HTML内容添加样式，简单理解就是谁要改变，变成什么样，你就修饰谁；
JavaScript是在body部分之后，用来描述你在这个网页要进行的动作。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看上去还是不错的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！