简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 引入外部css，A链接/列表/定位/事件/导航条下拉实战
Blogger Information
Blog 17
fans 1
comment 0
visits 14753
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链接/列表/定位/事件/导航条下拉实战
邱世家的博客
Original
969 people have browsed it

引入外部css两种方法

  • 先写一个css脚本
  • .red{color:green;}
  • 通过<link rel="stylesheet" href="链接地址" />引入
  • <link rel="stylesheet" href="style.css" />
  • 通过<style></style>引入
    1. <style>
    2. /* @import url("style.css"); */
    3. @import "style.css";
    4. </style>

    a链接使用方法

  • a链接还有个属性target，里面的值为_self时是在当前页面打开，为_blank时在新页面打开
    <a href="https://www.php.cn/" target="_self">php</a>
  • 下载文件
    <a href="http://127.0.0.1:5500/0612/demo1.rar" target="_blank">php</a>
  • 发邮件
    <a href="mailto:774288543@qq.com" target="_blank">给我发邮件</a>
  • 打电话
    <a href="tel:18865321212" target="_blank">打电话</a>
  • 锚点(锚点就是id #hello #代表id)
    1. <a href="#hello" target="_blank">跳转到锚点</a>
    2. <h1 id="hello" style="margin-top: 1000px;">Hello Word</h1>

    列表

  • 无序列表(ul+li)，搭配a链接常见于导航条
    1. <ul>
    2.  <li><a href="">首页</a></li>
    3.  <li><a href="">秒杀</a></li>
    4.  <li><a href="">plus</a></li>
    5. </ul>
  • 有序列表（ol+li）不常用，ol属性值start它定义从多少开始,可以是字母或者罗马数字
    1. <ol start="5">
    2.     <li><a href="">电脑、办公</a></li>
    3.     <li><a href="">服装/男装/女装</a></li>
    4.     <li><a href="">图书/文娱、教育</a></li>
    5.   </ol>
  • 自定义列表（dl+dt+dd）dl代表外部标签，dt标题（每一项）dd内容
    1. <dl>
    2.     <dt>电话：</dt>
    3.     <dd><a href="tel:76546554">手机</a></dd>
    4.     <dd><a href="tel:774288546" target="_blank">7742</a></dd>
    5.     <dt>地址：</dt>
    6.     <dd>青岛市市北区</dd>
    7.   </dl>

元素定位

1.静态定位 position:static；
一般的标签元素不加任何定位属性都属于文档流定位。
2.相对定位 position：relative; 相对于自己的初始位置开始定位
3.绝对定位 position:absolute; 绝对定位必须要有一个父级元素为定位参照物，否则就相对于body左上角进行定位（就是一步一步往上找，往上都没有定位参照物就按照body来）；

  1. <style>
  2. body{
  3. border: 1px solid red;
  4. hight: 100vh;
  5. }
  6. .box1{
  7. border: 2px solid blue;
  8. width: 200px;
  9. hight: 200px;
  10. position: relative;
  11.         top: 50px;
  12.         left: 50px;
  13. }
  14. .box2{
  15. border: 2px solid green;
  16. width: 100px;
  17. hight: 100px;
  18. position: absolute;
  19.         top: 50px;
  20.         left: 50px;
  21. }
  22. </style>
  23. <body>
  24. <div class="box1"></div>
  25. <div class="box2"></div>
  26. </body>

事件

  • 事件属性的三种方式：
    1.通过事件属性来添加
  • 当点击按钮1的时候控制台输出按钮1（onclick 代表点击事件属性 this代表当前的对象innerText代表内部的文本）
    <button onclick="console.log(this.innerText)">按钮1</button>
    2.通过对象属性方式来添加（只有最后一次事件生效）
    点击按钮2控制台输出第二次点击
    1. <script>
    2.     //document.querySelectorAll("button") 拿到多个按钮
    3.     //此处为啥用function函数不是很明白
    4.     document.querySelectorAll("button")[1].onclick = function () {
    5.       console.log("第一次点击");
    6.     };
    7.     document.querySelectorAll("button")[1].onclick = function () {
    8.       console.log("第二次点击");
    9.     };
    10. </script>

3.通过添加事件监听器来添加.addEventListener (推荐方式)
点击按钮3，控制台输出第一次点击和第二次点击

  • 语法
  • Element.addEventListener(event, function, useCapture)
  • event：必带，事件类型如click，
  • function：必带，指定要事件触发时执行的函数，
  • useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行
    true - 事件句柄在捕获阶段执行
    false- false- 默认,可以不写。事件句柄在冒泡阶段执行
  1. <script>
  2.       // const 声明一个只读的常量。一旦声明常量的值不能改变
  3.       const btn3 = document.querySelectorAll("button")[2];
  4.       //btn3.addEventListener(事件类型，事件方法);
  5.       btn3.addEventListener("click", function () {
  6.         console.log("第一次点击");
  7.       });
  8.       btn3.addEventListener("click", function () {
  9.         console.log("第二次点击");
  10.       });
  11. </script>

事件冒泡与事件捕获（.addEventListener用到第三个参数）

  1. <body>
  2.     <div>
  3.       <li>
  4.         <a href="">点击我试试看</a>
  5.       </li>
  6.     </div>
  7.     <script>
  8.       const a = document.querySelector("a");
  9.       const li = document.querySelector("li");
  10.       const div = document.querySelector("div");
  11.       const body = document.body;
  12.       //事件冒泡：由内向外
  13.       a.addEventListener("click", showTagName, false);
  14.       li.addEventListener("click", showTagName, false);
  15.       div.addEventListener("click", showTagName);
  16.       body.addEventListener("click", showTagName);
  17.       //事件捕获：由内向外（true，必须写）
  18.       a.addEventListener("click", showTagName, true);
  19.       li.addEventListener("click", showTagName, true);
  20.       div.addEventListener("click", showTagName, true);
  21.       body.addEventListener("click", showTagName, true);
  22.       function showTagName() {
  23.         alert(this.tagName);
  24.       }
  25.     </script>
  26.   </body>

事件代理/事件委托

  • 事件代理:用父级代理所有子元素以及更下一级的元素上的同名事件
    1. body>
    2.   <ul>
    3.     <li>item1</li>
    4.     <li>item2</li>
    5.     <li>item3</li>
    6.     <li>item4</li>
    7.     <li>item5</li>
    8.   </ul>
    9. </body>
    10. <script>
    11.   // const lis = document.querySelectorAll("li");
    12.   // lis.forEach(function (li) {
    13.   //   li.addEventListener("click", function () {
    14.   //     console.log(li.innerText);
    15.   //   });
    16.   // });
    17.   // ev: 事件对象
    18.   // 事件代理： 用父级代理所有子元素以及更下一级的元素上的同名事件
    19.   document.querySelector("ul").addEventListener("click", function (ev) {
    20.     // ev.target: 返回的是当前正在触发事件的元素
    21.     console.log(ev.target);
    22.     // ev.currentTarget: 返回的是事件绑定者
    23.     console.log(ev.currentTarget);
    24.   });
    25. </script>
    26. </html>

实战php中文网下拉菜单

  • 先写html结构
    1. <ul id="nav">
    2.     <li><a href="">首页</a></li>
    3.     <li><a href="">视频教程</a></li>
    4.     <li>
    5.       <a href="">资源下载</a>
    6.       <ul>
    7.         <li><a href="">php工具</a></li>
    8.         <li><a href="">在线手册</a></li>
    9.         <li><a href="">学习课件</a></li>
    10.         <li><a href="">网站源码</a></li>
    11.       </ul>
    12.     </li>
    13.     <li><a href="">社区问答</a></li>
    14.     <li>
    15.       <a href="">技术文章</a>
    16.       <ul>
    17.         <li><a href="">头条</a></li>
    18.         <li><a href="">博客</a></li>
    19.         <li><a href="">php教程</a></li>
    20.         <li><a href="">php框架</a></li>
    21.       </ul>
    22.     </li>
    23.   </ul>

  • 再写css样式

    1. <style>
    2.     /* 元素样式初始化: 学到盒模型再详细介绍 
    3.       box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
    4.       border-box：为元素设定的宽度和高度决定了元素的边框盒。*/
    5.     * {
    6.       margin: 0;
    7.       padding: 0;
    8.       box-sizing: border-box;
    9.     }
    10.     /* 定义a链接文本颜色并清除a链接自带样式 */
    11.     a {
    12.       /* color: rgba(255, 255, 255, 0.7); */
    13.       color: #bbb;
    14.       text-decoration: none;
    15.     }
    16.     /* 给导航nav也就是最大的ul 设置背景色为黑色 高度为50*/
    17.     #nav {
    18.       background-color: black;
    19.       height: 50px;
    20.       line-height: 50px;
    21.     }
    22.     /* 清楚li自带样式，做左浮动 ，设置外边距*/
    23.     li {
    24.       list-style: none;
    25.       margin: 0 10px;
    26.       float: left;
    27.     }
    28.     /* 给nav里面的li里面的a标签设置一个效果鼠标悬停高亮显示 */
    29.     #nav > li > a:hover {
    30.       color: white;
    31.     }
    33.     /* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
    34.     #nav > li {
    35.       position: relative;
    36.     }
    37.     /* 设置子菜单的显示位置 */
    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>

  • 写js，实现鼠标移上去显示子菜单 移除不显示子菜单
    1. <script>
    2.   //获取所有主导航
    3.   const navs = document.querySelectorAll("#nav > li");
    4.   navs.forEach(function (nav) {
    5.     // 鼠标移入时: 显示子菜单
    6.     nav.addEventListener("mouseover", showSubMenu);
    7.     // 鼠标移出时: 关掉子菜单
    8.     nav.addEventListener("mouseout", closeSubMenu);
    9.   });
    10.   // 显示子菜单
    11.   function showSubMenu(ev) {
    12.     console.log(ev.target);
    13.     // 当前这个导航有没有子菜单?
    14.     if (ev.target.nextElementSibling !== null) {
    15.       ev.target.nextElementSibling.style.display = "block";
    16.     }
    17.   }
    18.   // 关掉子菜单 ,判断当前正在被触发元素（ev.target）必须是a标签才关掉.nodeName返回标签名
    19.   //.nextElementSibling 有没有兄弟元素
    20.   function closeSubMenu(ev) {
    21.     if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
    22.       ev.target.nextElementSibling.style.display = "none";
    23.     }
    24.   }
    25. </script>

总结

  • 对于js中的函数 循环 还是不明白，自己写不出来这个下拉菜单。还需要多多努力
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：目前自己写不出没有关系 , js脚本 直接抄老师的就可以, 重点放在html,css上
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！