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

主要内容包括：
1-css样式、链接、列表、元素定位
2-事件监听、事件触发阶段、事件代理
3-网页菜单实战

1、css样式的种类

html是框架，css是样式。

序号 内容 描述
1 内嵌样式 通过元素内style直接定义方式解决。但这种只能正对独立的一个元素来定义
2 前置模式 将相同的类，或元素标签（不建议）这种放到一起来定义
3 style.css文件方式 将对应的样式定义放到一个独立的.css文件中，这样多个html中有对应的类等都可以调用。

等于第一个只适应用一个元素，第二个适用于同一文件中的多个元素，第三个则适用于多个文件中的多个元素。
第一种情况示例：

  1. <body>
  2.     <h2 style="color:greenyellow;">这个世界值得珍惜</h2>
  3.     <h3 style="color:red ">谁也不知道明天将会发生什么？</h3>
  4. </body>

第二种情况示例：

  1. <head>
  2.     <style>
  3.         .red{
  4.             color: red;
  5.             }
  6.     </style>
  7. </head>
  8. <body>
  9.     <h2 class="red";>这个世界值得珍惜</h2>
  10.     <h3 class="red";>谁也不知道明天将会发生什么？</h3>
  11. </body>

第三种情况示例，又分两种，一种是@import方式（简写和url复杂写）。

  1. <head>
  2.    <style>
  3.         /* @import url("demo12.css"); */
  4.         @import "demo12.css";
  5.     </style>
  6. </head>
  7. <body>
  8.     <h2 class="red";>这个世界值得珍惜</h2>
  9.     <h3 class="red";>谁也不知道明天将会发生什么？</h3>
  10. </body>

另外一种是link方式。

  1. <head>
  2.     <link rel="stylesheet" href="demo12.css">
  3. </head>
  4. <body>
  5.     <h2 class="red";>有些东西是你永远无法知道的</h2>
  6.     <h3 class="red";>有些东西是你知道了也毫无意义的</h3>
  7. </body>

2、链接

链接的功能有好多种，主要的有：
|序号 |描述 |
|———|——————————-|
|1 |跳转到一个网页|
|2 |跳转到一个网页可以打开的文件|
|3 |下载。其实就是跳转到一个网页无法直接打开的文件|
|4 |发送邮件|
|5 |拨打电话|
|6 |快速到一个锚点，例如bottom、top等|
示例如下

  1. <body>
  2.     <!-- 打开一个网站 -->
  3.     <a href="https://php.cn" target="_self">php中文网</a>
  4.     <!-- 下载文件 -->
  5.     <a href="http://127.0.0.1:5500/0612/demo1.zip" target="_blank">下载文件</a>
  6.     <!-- 发邮件 -->
  7.     <a href="mailto: 498668472@qq.com" target="_blank">请发邮件给我</a>
  8.     <!-- 打电话 -->
  9.     <a href="tel:189456***34" target="_blank">请给我打电话</a>
  11.     <a href="#hello">跳转到锚点</a>
  13.     <!-- 锚点。style中的margin参数是为了将上下间隔拉大 -->
  14.     <h1 id="hello" style="margin-top: 1000px;">这里是很下面的文档</h1> 
  15.   </body>

3、列表

列表有三种形式，无序列表、有序列表、自定义列表（有序列表用的相对少一些）。

一个技巧：vs code中直接通过

ul>li*3>a 就可以自动生成三行link填充的列表。

a：无序列表

  1.     <!-- 无序列表 -->
  2.     <!-- ul+li -->
  3.     <ul>
  4.       <li><a href="">首页</a></li>
  5.       <li><a href="">正在秒杀</a></li>
  6.       <li><a href="">Plus</a></li>
  7.     </ul>

b：有序列表

  1.    <!-- 有序列表 -->
  2.     <!-- ol + li -->
  3.     <h3>商品分类</h3>
  4.     <ol start="1" type="i">
  5.       <li><a href="">电脑 / 办公</a></li>
  6.       <li><a href="">服装 / 男装 / 女装</a></li>
  7.       <li><a href="">图书 / 文娱 / 教育</a></li>
  8.     </ol>

c：自定义列表

  1.     <!-- 自定义列表 -->
  2.     <h3>联系我们</h3>
  3.     <!-- dl + dt + dd  -->
  4.     <dl>
  5.       <dt>电话:</dt>
  6.       <dd><a href="tel:189456***34" target="_blank">189456***34</a></dd>
  7.       <dd><a href="tel:0551-67744***" target="_blank">0551-67744***</a></dd>
  9.       <dt>地址:</dt>
  10.       <dd>魔界58弄46号（敲门要注意）</dd>
  11.     </dl>

4、元素定位

a：有相对定位和绝对定位两种。

b：最大的是body。然后内部有相互嵌套和父子关系。

c：vh是一个相对展示页面的百分比。eg50%，可以理解为相对展示页面的50%。

  1.     /* v: viewport, h:height */
  2.     /* viewport: 视口, 可视窗口, 当前你的看到的窗口大小; */
  1. </head>
  2. <style>
  3.     body{
  4.         border:1px solid red;
  5.         height: 50vh;
  6.     }
  7.     .box1{
  8.         border:1px solid blue;
  9.         height: 20vh;
  10.         width: 20vh;
  11.         top:20px;
  12.         left:20px;
  13.         position: absolute;
  14.     }
  15.     .box2{
  16.         border:1px solid green; 
  17.         height: 40px;
  18.         width: 40px;
  19.         top:20px;
  20.         left:20px;
  21.         position: absolute;
  22.     }
  23. </style>
  24. <body>
  25.     <div class="box1">
  26.         <div class="box2"></div>
  27.     </div>
  28. </body>

5、事件、事件监听

事件有三种触发货监听模式

js要注意结束的：号，否则有些运行不了

展示结果是在浏览器的inspect->console中。

  1. body>
  2.     <!-- 1. （内嵌的）事件属性 -->
  3.     <button onclick="console.log(this.innerText)">神奇</button>
  4.     <button>战争</button>
  5.     <button>和平</button>
  7. <script>
  8.     //2.对象属性方式添加事件，只有最后一次是有效的，同名事件彼此覆盖
  9.     document.querySelectorAll("button")[1].onclick = function() {
  10.         console.log("第一次点击‘战争’");
  11.     };
  13.     document.querySelectorAll("button")[1].onclick = function() {
  14.         console.log("第二次点击‘战争’");
  15.     };
  16.     // 3. 事件监听器
  17.     // btn.addEventListener(事件类型, 事件方法);
  18.     const btn = document.querySelectorAll("button")[2];
  19.     btn.addEventListener("click",function() {
  20.         console.log("这是人类第一次开始和平");
  21.     });
  22.     btn.addEventListener("click",function() {
  23.         console.log("这是人类第二次开始和平");
  24.     });
  26. </script>

6、事件触发阶段

类似一个套娃，可以由内而外，也可以由外而内。

由内而外的时候addEventListener的默认参数就是false。反之由外而内则是true。

注意点：这个地方因为是选择的单一元素，因此用querySelector，最后没有all。

  1. <body>
  2.     <div>
  3.         <li><a href="">看到妖怪就赶快跑</a></li>
  4.     </div>
  5. </body>
  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);
  14.     li.addEventListener("click",showTagName);
  15.     div.addEventListener("click",showTagName);
  16.     body.addEventListener("click",showTagName);
  18.     // 事件捕获: 由外向内
  19.     a.addEventListener("click", showTagName, true);
  20.     li.addEventListener("click", showTagName, true);
  21.     div.addEventListener("click", showTagName, true);
  22.     body.addEventListener("click", showTagName, true);
  24.     function showTagName() {
  25.         alert(this.tagName);
  26.     }
  27. </script>

7、事件代理

通过上一级（父级）来代理对下一级的操作。

例如下面这第一种，其实就相当于直接操作：

  1. <body>
  2.     <ul>
  3.         <li>外星人一级</li>
  4.         <li>外星人二级</li>
  5.         <li>外星人三级</li>
  6.         <li>外星人四级</li>
  7.         <li>外星人五级</li>
  8.         <li>外星人六级</li>
  9.         <li>外星人七级</li>
  10.         <li>外星人八级</li>
  11.         <li>外星人九级</li>
  12.         <li>外星人十级</li>
  13.     </ul>
  14. </body>
  16. <script>
  17.     const lis = document.querySelectorAll("li");
  18.     lis.forEach(function (li) {
  19.       li.addEventListener("click", function () {
  20.         console.log(li.innerText);
  21.       });
  22.     });
  23. </script>

下面这种情况则是通过ul来代理对li的操作，就是事件代理。

其中的ev为事件对象（估计用了下ed，也可以）。

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

  1. <script>
  2.     document.querySelector("ul").addEventListener("click", function(ed){
  3.         console.log(ed.target);
  4.         console.log(ed.currentTarget);
  5.     });
  6. </script>

8、网页菜单实战

将几个功能做了结合：样式 + 链接 + 列表 + 事件监听 + 事件委托。

  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>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         a {
  15.             color:#bbb;
  16.             text-decoration: none;
  17.         }
  18.         #nav {
  19.             background-color: black;
  20.             height: 50px;
  21.             line-height: 50px;
  22.         }
  23.         li {
  24.             list-style: none;
  25.             margin: 0 10px;
  26.             float: left;
  27.         }
  28.         #nav > li > a:hover {
  29.             color: white;
  30.         }
  31.         #nav > li {
  32.             position: relative;
  33.         }
  34.         #nav > li > ul{
  35.             position:absolute;
  36.             top: 50px;
  37.             width: 180px;
  38.             border: 1px solid #aaa;
  39.             border-top: none;
  40.         }
  41.         #nav > li > ul > li a{
  42.             display: inline-block;
  43.             height: 50px;
  44.             color: #444;
  45.         }
  46.         ul.sub li:hover{
  47.             background-color: #eee;
  48.         }
  49.         #nav > li > ul{
  50.             display: none;
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55.     <ul id="nav">
  56.         <li><a href="">首页</a></li>
  57.         <li>
  58.             <a href="">神仙</a>
  59.             <ul>
  60.                 <li><a href="">一级</a></li>
  61.                 <li><a href="">二级</a></li>
  62.                 <li><a href="">三级</a></li>
  63.                 <li><a href="">四级</a></li>
  64.                 <li><a href="">五级</a></li>
  65.                 <li><a href="">六级</a></li>
  66.             </ul>
  67.         </li>
  68.         <li>
  69.             <a href="">妖怪</a>
  70.             <ul>
  71.                 <li><a href="">一妖</a></li>
  72.                 <li><a href="">二妖</a></li>
  73.                 <li><a href="">三妖</a></li>
  74.             </ul>
  75.         </li>
  76.         <li><a href="">转化</a></li>
  77.         <li><a href="">我的</a></li>
  78.     </ul>
  79. </body>
  80. <script>
  81.     //显示子菜单、关闭子菜单
  82.     const navs = document.querySelectorAll("#nav > li");
  83.     navs.forEach(function(nav){
  84.         nav.addEventListener("mouseover", showSubMenu);
  85.         nav.addEventListener("mouseout", closeSubMenu);
  86.     });
  88.     //显示子菜单的function
  89.     function showSubMenu(ed){
  90.         console.log(ed.target);
  91.         if (ed.target.nextElementSibling !== null){
  92.             ed.target.nextElementSibling.style.display = "block";
  93.         }
  94.     }
  95.     //关闭子菜单的function
  96.     function closeSubMenu(ed){
  97.         if (ed.target.nodeName === "A" && ed.target.nextElementSibling !== null){
  98.             ed.target.nextElementSibling.style.display = "none";
  99.         }
  100.     }
  102. </script>
  104. </html>
批改老师：WJWJ

批改状态：合格

老师批语：总体写的非常不错，markdown表格没显示出来。
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系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+教程免费学
    微信扫码登录