微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 引入外部css，A链接/列表/定位/事件/导航条下拉实战
博主信息
博文 17
粉丝 1
评论 0
访问量 19989
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
引入外部css，A链接/列表/定位/事件/导航条下拉实战
邱世家的博客
原创
1182人浏览过

引入外部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中的函数 循环 还是不明白，自己写不出来这个下拉菜单。还需要多多努力
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：目前自己写不出没有关系 , js脚本 直接抄老师的就可以, 重点放在html,css上
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录