search

博客列表 >CSS引入方式、A标签的作用、定位、列表、Js事件、HTML+CSS+JS实现下拉菜单

CSS引入方式、A标签的作用、定位、列表、Js事件、HTML+CSS+JS实现下拉菜单

嘬一口啊
嘬一口啊原创
2020年06月17日 13:08:201013浏览

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>
上一条：表格与表单实战练习下一条：表格与表单实战教程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多