.nav {
height: 30px;
background: #e3e4e5;
border-bottom: 1px solid #ddd;
}
.nav-box {
margin: 0px auto;
width: 1190px;
text-align: right;
}
.nav-box ul li {
display: inline-block;
padding: 0px 10px;
font-size: 12px;
height: 30px;
line-height: 30px;
position: relative; /*相对定位*/
}
.nav-box ul li a {
color: #999999;
text-decoration: none;
}
.nav-box ul li:not(:last-child):after {
content: "";
width: 1px;
height: 14px;
background: #cccccc;
position: absolute; /*绝对定位*/
top: 8px;
right: 0px;
display: block;
position没有写,布局不生效
有css样式的处理在里面
效果肯定是有的,这个字体是继承的,这个背景是自身元素的
你提交个代码上来让大家看看啊
那是有事件冒泡的问题吧
下载时选择 到本项目,然后设置项目格式,再选择下载到本地,就可以有视频中格式的文件了
自己在桌面创建新文件夹就可以了,我和老师的也不一样,也是m1
// 定义类 class Menu { // 构造函数 constructor (id) { // 获取 id为 menu-box 的标签 this.box = document.querySelector(id); // 获取 menu-box 第一个 ul 标签 this.ul = this.box.querySelector("ul"); // 获取 menu-box 所有 li 标签 this.lis = this.box.querySelectorAll("li"); // 获取 menu-box 所有 class 为 sub-menu 的标签 this.subMenuEles = this.box.querySelectorAll(".sub-menu"); this.timer1 = null; this.timer2 = null; this.init(); } init () { this.lis.forEach((item) => { item.addEventListener("mouseenter",(e) => { let li = e.target; if (this.timer1 != null) { clearTimeout(this.timer1); } this.timer1 = setTimeout(() => { li.children[1].classList.add("active"); }, 200) }) }); this.lis.forEach((item) => { item.addEventListener("mouseleave", (e) => { let li = e.target; if (this.timer2 != null) { clearTimeout(this.timer2); } this.timer2 = setTimeout(() => { // 如果快速移动,li.childeren[1].classList.remove("active") // 会因为上面的判断而没有执行,所以会出现鼠标移开但是二级列表还显示的问题 // 鼠标离开后,遍历二级列表,把二级列表的classList中的active去掉 this.subMenuEles.forEach((item) => { item.classList.remove("active") }); // li.children[1].classList.remove("active"); }, 200) }) }); } }
什么代码,从哪打开?问问题说清楚一点呀。
最后一个div没有闭合 body上面的div没有加>
rigth-box div放错地方
html发出来看一下
[Browsersync]无法打开浏览器(如果你在一个无头环境中使用Browsersync,你可能想要设置打开选项为false)
id的位置写错了
其实可以建一个项目包来下载的,这样就好添加了
相对路径是否正常呢?
看不到代码,没法判断
move(offset) { this.animate(offset /*表示位移距离*/ ) // 判断有几个索引值并赋值到num const num = this.indexbox.children[0].children.length for (let i = 0; i < num; i++) { //遍历所有索引的ul里面的li,修改classname为空 this.indexbox.children[0].children[i].className = "" //把当前索引加成active样式 this.indexbox.children[0].children[this.index - 1].className = "active" } } /*该方法为缓慢的过渡效果*/ animate(offset) { // 定义切换时间为1000毫秒 1秒 const time = 1000 //稍微移动为0.1秒 const rate = 100 //计算移动距离 let speed = offset / (time / rate) // 计算目标位置使用parseFloat去掉单位 let goal = parseFloat(this.picBox.style.left) - offset this.animated = true //判断是否到达目标位置 let animate = setInterval(() => { //计算去掉单位的目标绝对值减去目标位置的绝对值小于移动距离的绝对值 if (this.picBox.style.left == goal || Math.abs(Math.abs(parseFloat(this.picBox.style.left)) - Math.abs(goal)) < Math.abs(speed)) { this.picBox.style.left == goal clearInterval(animate) this.animated = false if (parseFloat(this.picBox.style.left) == 0) { this.picBox.style.left = -this.sliders * this.sliderWidth + "px" } else if (parseFloat(this.picBox.style.left) == -(this.sliders + 1) * this.sliderWidth) { this.picBox.style.left = -this.sliderWidth + "px" } } else { //未到达目标位置继续移动 this.picBox.style.left = parseFloat(this.picBox.style.left) - speed + "px" } }, rate) } leftRight() { this.box.querySelector(".left-box").addEventListener("click", () => { console.log("left-box") if (this.animated) { return } if (this.index - 1 < 1) { this.index = this.sliders } else { this.index-- } this.move(-this.sliderWidth) })
你自己对一下吧
你发的代码错误百出,核对一下代码吧。
报错是发生在倒数第二个remove那里的,第一个循环的事件是mouseenter不是mouse,而且你第二个循环那里怎么有两个循环?而且怎么是item.classList?
代码保没保存
是滴了