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

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

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

CSS引入方式

  1. 内联样式:写在html页面中的head中的样式使用<style></style>>标签包住
  2. 内嵌样式:写在标签元素中的样式<p style="color:red">内嵌样式</p>
  3. 外联样式:通过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>
  3. 下载文件
  4. <a href="http://127.0.0.1:5500/612/demo.zip" target="_blank">下载文件</a>
  5. 发邮件(记得换协议)
  6. 例:<a href="Mailto: 4483328349@qq.com" target="_blank">发邮件</a>
  7. 打电话(记得换协议)
  8. <a href="tel:183657***78" target="_blank">打电话</a>
  9. 锚点(锚点定位必须是id名)
  10. 例:<a href="#hello">找到锚点</a>
  11. <h1 id="hello" style="margin-top: 1000px;">Hello World</h1>

定位

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

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

postion:static默认定位

  1. 相对定位:position: relative;
  2. 元素相对于自己在文档流中的原始位置进行偏移(相对于自己本身在html中的位置进行偏移)
  3. 绝对定位:position: absolute;
  4. 绝对定位以带有定位属性的上一级元素作为参考,如果一直往上找没有的话就相对于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>
  8. 有序列表
  9. 例:
  10. start:设置类型的起始值
  11. type:设置在列表中使用的标记类型(类型包括数字、字母大小写、阿拉伯数字等)
  12. <ol start="1" type="i">
  13. <li><a href="">一</a></li>
  14. <li><a href="">二</a></li>
  15. <li><a href="">三</a></li>
  16. </ol>
  17. 自定义列表
  18. 例:
  19. 自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始。
  20. <dl>
  21. <dt>电话:</dt>
  22. <dd><a href="tel:189456***34" target="_blank">189456***34</a></dd>
  23. <dd><a href="tel:0551-67744***" target="_blank">0551-67744***</a></dd>
  24. <dt>地址:</dt>
  25. <dd>合肥市政务新区</dd>
  26. </dl>

事件与事件监听

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

事件冒泡:由内向外触发

事件捕获:由外向内触发

  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;
  20. // 事件冒泡: 由内向外
  21. a.addEventListener("click", showTagName, false);
  22. li.addEventListener("click", showTagName, false);
  23. div.addEventListener("click", showTagName);
  24. body.addEventListener("click", showTagName);
  25. // 事件捕货: 由外向内
  26. a.addEventListener("click", showTagName, true);
  27. li.addEventListener("click", showTagName, true);
  28. div.addEventListener("click", showTagName, true);
  29. body.addEventListener("click", showTagName, true);
  30. function showTagName() {
  31. // 弹出当前正在被触发的事件标签名
  32. alert(this.tagName);
  33. }
  34. </script>
  35. </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. }
  32. /* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
  33. #nav > li {
  34. position: relative;
  35. }
  36. #nav > li > ul {
  37. position: absolute;
  38. top: 50px;
  39. width: 180px;
  40. border: 1px solid #aaa;
  41. border-top: none;
  42. }
  43. #nav > li > ul > li a {
  44. display: inline-block;
  45. height: 50px;
  46. color: #444;
  47. }
  48. ul.sub li:hover {
  49. background-color: #eee;
  50. }
  51. /* 初始化时不要显示子菜单 */
  52. #nav > li > ul {
  53. display: none;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <ul id="nav">
  59. <li><a href="">首页</a></li>
  60. <li><a href="">一一一</a></li>
  61. <li>
  62. <a href="">二二二</a>
  63. <ul>
  64. <li><a href="">111</a></li>
  65. <li><a href="">222</a></li>
  66. <li><a href="">333</a></li>
  67. <li><a href="">444</a></li>
  68. </ul>
  69. </li>
  70. <li><a href="">三三三</a></li>
  71. <li>
  72. <a href="">四四四</a>
  73. <ul>
  74. <li><a href="">1111</a></li>
  75. <li><a href="">2222</a></li>
  76. <li><a href="">3333</a></li>
  77. <li><a href="">4444</a></li>
  78. </ul>
  79. </li>
  80. </ul>
  81. </body>
  82. <script type="text/javascript">
  83. // 获取所有导航菜单
  84. const navs = document.querySelectorAll("#nav > li");
  85. // 循环给每一个主导航菜单添加监听事件
  86. navs.forEach(function (nav){
  87. // 给每一个主导航菜单添加鼠标移入事件
  88. nav.addEventListener("mouseover",showSubMenu);
  89. // 给每一个主导航菜单添加鼠标移出事件
  90. nav.addEventListener("mouseout",closeSubMenu);
  91. });
  92. // 定义鼠标移出事件的函数
  93. function showSubMenu(ev){
  94. // 当鼠标移入主导航是让子菜单显示
  95. // 判断当前主菜单下是否有子菜单
  96. // 打印输出查看当前触发事件的同级下一个标签
  97. // console.log(ev.target.nextElementSibling);
  98. if (ev.target.nextElementSibling !== null) {
  99. // ev.target.nextElementSibling.style.display = "block";
  100. ev.target.nextElementSibling.style.display = "block";
  101. }
  102. // console.log(ev.target.nodeName);
  103. }
  104. function closeSubMenu(ev){
  105. // 当鼠标移出主导航是让子菜单关闭
  106. // 判断当前主菜单下有没有子菜单,有就设置隐藏
  107. // 这里的主导航(a标签)的父级标签li冒泡了,还需加个判断,判断当前被触发事件的元素标签必须是A标签才触发关闭,否则不触发
  108. // if (ev.target.nextElementSibling !== null) {
  109. if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  110. ev.target.nextElementSibling.style.display = "none";
  111. }
  112. }
  113. </script>
  114. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议