引入外部css两种方法
- 先写一个css脚本
.red{color:green;}- 通过<link rel="stylesheet" href="链接地址" />引入
<link rel="stylesheet" href="style.css" />- 通过<style></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)
<a href="#hello" target="_blank">跳转到锚点</a><h1 id="hello" style="margin-top: 1000px;">Hello Word</h1>
列表
- 无序列表(ul+li)，搭配a链接常见于导航条
<ul><li><a href="">首页</a></li><li><a href="">秒杀</a></li><li><a href="">plus</a></li></ul>
- 有序列表（ol+li）不常用，ol属性值start它定义从多少开始,可以是字母或者罗马数字
<ol start="5"><li><a href="">电脑、办公</a></li><li><a href="">服装/男装/女装</a></li><li><a href="">图书/文娱、教育</a></li></ol>
- 自定义列表（dl+dt+dd）dl代表外部标签，dt标题（每一项）dd内容
<dl><dt>电话：</dt><dd><a href="tel:76546554">手机</a></dd><dd><a href="tel:774288546" target="_blank">7742</a></dd><dt>地址：</dt><dd>青岛市市北区</dd></dl>
元素定位
1.静态定位 position:static；
一般的标签元素不加任何定位属性都属于文档流定位。
2.相对定位 position：relative; 相对于自己的初始位置开始定位
3.绝对定位 position:absolute; 绝对定位必须要有一个父级元素为定位参照物，否则就相对于body左上角进行定位（就是一步一步往上找，往上都没有定位参照物就按照body来）；
<style>body{border: 1px solid red;hight: 100vh;}.box1{border: 2px solid blue;width: 200px;hight: 200px;position: relative;top: 50px;left: 50px;}.box2{border: 2px solid green;width: 100px;hight: 100px;position: absolute;top: 50px;left: 50px;}</style><body><div class="box1"></div><div class="box2"></div></body>
事件
- 事件属性的三种方式：
1.通过事件属性来添加 - 当点击按钮1的时候控制台输出按钮1（onclick 代表点击事件属性 this代表当前的对象innerText代表内部的文本）
<button onclick="console.log(this.innerText)">按钮1</button>
2.通过对象属性方式来添加（只有最后一次事件生效）
点击按钮2控制台输出第二次点击<script>//document.querySelectorAll("button") 拿到多个按钮//此处为啥用function函数不是很明白document.querySelectorAll("button")[1].onclick = function () {console.log("第一次点击");};document.querySelectorAll("button")[1].onclick = function () {console.log("第二次点击");};</script>
3.通过添加事件监听器来添加.addEventListener (推荐方式)
点击按钮3，控制台输出第一次点击和第二次点击
- 语法
- Element.addEventListener(event, function, useCapture)
- event：必带，事件类型如click，
- function：必带，指定要事件触发时执行的函数，
- useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行
true - 事件句柄在捕获阶段执行
false- false- 默认,可以不写。事件句柄在冒泡阶段执行
<script>// const 声明一个只读的常量。一旦声明常量的值不能改变const btn3 = document.querySelectorAll("button")[2];//btn3.addEventListener(事件类型，事件方法);btn3.addEventListener("click", function () {console.log("第一次点击");});btn3.addEventListener("click", function () {console.log("第二次点击");});</script>
事件冒泡与事件捕获（.addEventListener用到第三个参数）
<body><div><li><a href="">点击我试试看</a></li></div><script>const a = document.querySelector("a");const li = document.querySelector("li");const div = document.querySelector("div");const body = document.body;//事件冒泡：由内向外a.addEventListener("click", showTagName, false);li.addEventListener("click", showTagName, false);div.addEventListener("click", showTagName);body.addEventListener("click", showTagName);//事件捕获：由内向外（true，必须写）a.addEventListener("click", showTagName, true);li.addEventListener("click", showTagName, true);div.addEventListener("click", showTagName, true);body.addEventListener("click", showTagName, true);function showTagName() {alert(this.tagName);}</script></body>
事件代理/事件委托
- 事件代理:用父级代理所有子元素以及更下一级的元素上的同名事件
body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>// const lis = document.querySelectorAll("li");// lis.forEach(function (li) {// li.addEventListener("click", function () {// console.log(li.innerText);// });// });// ev: 事件对象// 事件代理： 用父级代理所有子元素以及更下一级的元素上的同名事件document.querySelector("ul").addEventListener("click", function (ev) {// ev.target: 返回的是当前正在触发事件的元素console.log(ev.target);// ev.currentTarget: 返回的是事件绑定者console.log(ev.currentTarget);});</script></html>
实战php中文网下拉菜单
- 先写html结构
<ul id="nav"><li><a href="">首页</a></li><li><a href="">视频教程</a></li><li><a href="">资源下载</a><ul><li><a href="">php工具</a></li><li><a href="">在线手册</a></li><li><a href="">学习课件</a></li><li><a href="">网站源码</a></li></ul></li><li><a href="">社区问答</a></li><li><a href="">技术文章</a><ul><li><a href="">头条</a></li><li><a href="">博客</a></li><li><a href="">php教程</a></li><li><a href="">php框架</a></li></ul></li></ul>
再写css样式
<style>/* 元素样式初始化: 学到盒模型再详细介绍box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。border-box：为元素设定的宽度和高度决定了元素的边框盒。*/* {margin: 0;padding: 0;box-sizing: border-box;}/* 定义a链接文本颜色并清除a链接自带样式 */a {/* color: rgba(255, 255, 255, 0.7); */color: #bbb;text-decoration: none;}/* 给导航nav也就是最大的ul 设置背景色为黑色 高度为50*/#nav {background-color: black;height: 50px;line-height: 50px;}/* 清楚li自带样式，做左浮动 ，设置外边距*/li {list-style: none;margin: 0 10px;float: left;}/* 给nav里面的li里面的a标签设置一个效果鼠标悬停高亮显示 */#nav > li > a:hover {color: white;}/* 将父级设置为子菜单的定位容器,即转为定位元素即可 */#nav > li {position: relative;}/* 设置子菜单的显示位置 */#nav > li > ul {position: absolute;top: 50px;width: 180px;border: 1px solid #aaa;border-top: none;}#nav > li > ul > li a {display: inline-block;height: 50px;color: #444;}ul.sub li:hover {background-color: #eee;}/* 初始化时不要显示子菜单 */#nav > li > ul {display: none;}</style>
- 写js，实现鼠标移上去显示子菜单 移除不显示子菜单
<script>//获取所有主导航const navs = document.querySelectorAll("#nav > li");navs.forEach(function (nav) {// 鼠标移入时: 显示子菜单nav.addEventListener("mouseover", showSubMenu);// 鼠标移出时: 关掉子菜单nav.addEventListener("mouseout", closeSubMenu);});// 显示子菜单function showSubMenu(ev) {console.log(ev.target);// 当前这个导航有没有子菜单?if (ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "block";}}// 关掉子菜单 ,判断当前正在被触发元素（ev.target）必须是a标签才关掉.nodeName返回标签名//.nextElementSibling 有没有兄弟元素function closeSubMenu(ev) {if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "none";}}</script>
总结
- 对于js中的函数 循环 还是不明白，自己写不出来这个下拉菜单。还需要多多努力