Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS引入方式、A标签的作用、定位、列表、Js事件、HTML+CSS+JS实现下拉菜单
Blogger Information
Blog 17
fans 0
comment 0
visits 19027
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
CSS引入方式、A标签的作用、定位、列表、Js事件、HTML+CSS+JS实现下拉菜单
嘬一口啊
Original
994 people have browsed it

CSS引入方式

  1. 内联样式：写在html页面中的head中的样式使用<style></style>>标签包住
  3. 内嵌样式：写在标签元素中的样式<p style="color:red">内嵌样式</p>
  5. 外联样式：通过link标签引入css文件，<link rel="stylesheet" href="style.css" /> 或 @import url("文件名");[另一种写法： @import "style.css";]

A标签的作用

  1. 打开网站
  2. 例：<a href="https://php.cn" target="_self">baidu.com</a>
  4. 下载文件
  5. <a href="http://127.0.0.1:5500/612/demo.zip" target="_blank">下载文件</a>
  7. 发邮件（记得换协议）
  8. 例：<a href="Mailto: 4483328349@qq.com" target="_blank">发邮件</a>
  10. 打电话（记得换协议）
  11. <a href="tel:183657***78" target="_blank">打电话</a>
  13. 锚点（锚点定位必须是id名）
  14. 例：<a href="#hello">找到锚点</a>
  16. <h1 id="hello" style="margin-top: 1000px;">Hello World</h1>

定位

文档流: 元素的排列按照书写顺序，源码中的顺序

vh:可视窗口 100vh：当前可视窗口100%高度 50vh：当前可视窗口50%高度

postion：static默认定位

  1. 相对定位：position: relative;
  2. 元素相对于自己在文档流中的原始位置进行偏移（相对于自己本身在html中的位置进行偏移）
  5. 绝对定位：position: absolute;
  6. 绝对定位以带有定位属性的上一级元素作为参考，如果一直往上找没有的话就相对于body进行定位

列表

  1. 无序列表
  2. 例：
  3.  <ul>
  4.       <li><a href="">1</a></li>
  5.       <li><a href="">2</a></li>
  6.       <li><a href="">3</a></li>
  7. </ul>
  9. 有序列表
  10. 例：
  11. start：设置类型的起始值
  12. type：设置在列表中使用的标记类型（类型包括数字、字母大小写、阿拉伯数字等）
  14. <ol start="1" type="i">
  15.       <li><a href="">一</a></li>
  16.       <li><a href="">二</a></li>
  17.       <li><a href="">三</a></li>
  18. </ol>
  20. 自定义列表
  21. 例：
  22. 自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。
  23. <dl>
  24.       <dt>电话:</dt>
  25.       <dd><a href="tel:189456***34" target="_blank">189456***34</a></dd>
  26.       <dd><a href="tel:0551-67744***" target="_blank">0551-67744***</a></dd>
  27.       <dt>地址:</dt>
  28.       <dd>合肥市政务新区</dd>
  29. </dl>

事件与事件监听

  • 事件三要素
  1. 事件源：获取事件源 【就是在哪个元素引发的事件，如a、p标签】
  2. 事件：绑定事件 【如绑定单击、双击、鼠标移入、移出等事件】
  3. 事件执行程序：封装书写驱动事件的程序【封装驱动事件的函数】
  • 给对象绑定事件的三种方法
  1. 第一种直接将事件添加到元素上
  2. <button onclick="console.log(this.innerText)">按钮1</button>
  4. 第二种将事件直接作为属性添加到对象上
  5. document.querySelectorAll("button")[1].onclick = function () {
  6.     console.log("第一次点击");
  7. };
  9. 第三种是addEventListener() 【监听事件】方法
  10. const btn3 = document.querySelectorAll("button")[2];
  11. btn3.addEventListener("click", function () {
  12.     console.log("第一次点击");
  13. });
  • 事件触发阶段【事件冒泡和事件捕获】

事件冒泡：由内向外触发

事件捕获：由外向内触发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件冒泡&事件捕获</title>
  7.   </head>
  8.   <body>
  9.     <div>
  10.       <li>
  11.         <a href="">点击我</a>
  12.       </li>
  13.     </div>
  14.   </body>
  15.   <script>
  16.     const a = document.querySelector("a");
  17.     const li = document.querySelector("li");
  18.     const div = document.querySelector("div");
  19.     const body = document.body;
  21.     // 事件冒泡: 由内向外
  22.     a.addEventListener("click", showTagName, false);
  23.     li.addEventListener("click", showTagName, false);
  24.     div.addEventListener("click", showTagName);
  25.     body.addEventListener("click", showTagName);
  27.     // 事件捕货: 由外向内
  28.     a.addEventListener("click", showTagName, true);
  29.     li.addEventListener("click", showTagName, true);
  30.     div.addEventListener("click", showTagName, true);
  31.     body.addEventListener("click", showTagName, true);
  33.     function showTagName() {
  34.       // 弹出当前正在被触发的事件标签名
  35.       alert(this.tagName);
  36.     }
  37.   </script>
  38. </html>
  • 事件代理【也叫事件委托】

事件代理： 用父级代理所有子元素以及更下一级的元素上的同名事件

ev: 事件对象

ev.target: 返回的是当前正在触发事件的元素

ev.currentTarget: 返回的是事件绑定者

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件代理/事件委托</title>
  7.   </head>
  8.   <body>
  9.     <ul>
  10.       <li>item1</li>
  11.       <li>item2</li>
  12.       <li>item3</li>
  13.       <li>item4</li>
  14.       <li>item5</li>
  15.       <li>item6</li>
  16.       <li>item7</li>
  17.       <li>item8</li>
  18.       <li>item9</li>
  19.       <li>item10</li>
  20.     </ul>
  21.   </body>
  22.   <script>
  23.     document.querySelector("ul").addEventListener("click", function (ev){
  24.       // ev.target: 返回的是当前正在触发事件的元素
  25.       console.log(ev.target);
  26.       // ev.currentTarget: 返回的是事件绑定者
  27.       console.log(ev.currentTarget);
  28.     });
  29.   </script>
  30. </html>
  • HTML+CSS+JS实现下拉菜单
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>下拉菜单</title>
  7.     <style>
  8.       /* 元素样式初始化: 学到盒模型再详细介绍 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         /* color: rgba(255, 255, 255, 0.7); */
  16.         color: #bbb;
  17.         text-decoration: none;
  18.       }
  19.       #nav {
  20.         background-color: black;
  21.         height: 50px;
  22.         line-height: 50px;
  23.       }
  24.       li {
  25.         list-style: none;
  26.         margin: 0 10px;
  27.         float: left;
  28.       }
  29.       #nav > li > a:hover {
  30.         color: white;
  31.       }
  33.       /* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
  34.       #nav > li {
  35.         position: relative;
  36.       }
  38.       #nav > li > ul {
  39.         position: absolute;
  40.         top: 50px;
  42.         width: 180px;
  43.         border: 1px solid #aaa;
  44.         border-top: none;
  45.       }
  46.       #nav > li > ul > li a {
  47.         display: inline-block;
  48.         height: 50px;
  49.         color: #444;
  50.       }
  51.       ul.sub li:hover {
  52.         background-color: #eee;
  53.       }
  55.       /* 初始化时不要显示子菜单 */
  56.       #nav > li > ul {
  57.         display: none;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <ul id="nav">
  63.       <li><a href="">首页</a></li>
  64.       <li><a href="">一一一</a></li>
  65.       <li>
  66.         <a href="">二二二</a>
  67.         <ul>
  68.           <li><a href="">111</a></li>
  69.           <li><a href="">222</a></li>
  70.           <li><a href="">333</a></li>
  71.           <li><a href="">444</a></li>
  72.         </ul>
  73.       </li>
  74.       <li><a href="">三三三</a></li>
  75.       <li>
  76.         <a href="">四四四</a>
  77.         <ul>
  78.           <li><a href="">1111</a></li>
  79.           <li><a href="">2222</a></li>
  80.           <li><a href="">3333</a></li>
  81.           <li><a href="">4444</a></li>
  82.         </ul>
  83.       </li>
  84.     </ul>
  85.   </body>
  86.   <script type="text/javascript">
  87.     // 获取所有导航菜单
  88.     const navs = document.querySelectorAll("#nav > li");
  90.     // 循环给每一个主导航菜单添加监听事件
  91.     navs.forEach(function (nav){
  92.       // 给每一个主导航菜单添加鼠标移入事件
  93.       nav.addEventListener("mouseover",showSubMenu);
  95.       // 给每一个主导航菜单添加鼠标移出事件
  96.       nav.addEventListener("mouseout",closeSubMenu);
  98.     });
  100.     // 定义鼠标移出事件的函数
  101.     function showSubMenu(ev){
  102.       // 当鼠标移入主导航是让子菜单显示
  104.       // 判断当前主菜单下是否有子菜单
  106.       // 打印输出查看当前触发事件的同级下一个标签
  107.       // console.log(ev.target.nextElementSibling);
  108.       if (ev.target.nextElementSibling !== null) {
  109.         // ev.target.nextElementSibling.style.display = "block";
  110.         ev.target.nextElementSibling.style.display = "block";
  111.       }
  112.       // console.log(ev.target.nodeName);
  113.     }
  115.     function closeSubMenu(ev){
  116.       // 当鼠标移出主导航是让子菜单关闭
  118.       // 判断当前主菜单下有没有子菜单，有就设置隐藏
  119.       // 这里的主导航(a标签)的父级标签li冒泡了，还需加个判断，判断当前被触发事件的元素标签必须是A标签才触发关闭，否则不触发
  120.      // if (ev.target.nextElementSibling !== null) {
  121.      if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  123.         ev.target.nextElementSibling.style.display = "none";
  124.       }
  125.     }
  127.   </script>
  128. </html>
Correcting teacher：WJWJ

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