建立网站导航栏的方法我想做电商
1.使用css画一个三角形
- 借助 border 实现，在 width 和 height 都为 0 时，设置 border，便会呈现三角形。想要哪个方向的三角形，设置其他三边为 透明即可。
- 同时，可以通过调整不同边的宽度，来调整三角形的高度和宽度。
<style>.box1 {width: 0;height: 0;content: '';border-right: 100px solid black;border-left: 100px solid transparent;border-top: 100px solid transparent;border-bottom: 100px solid transparent;}
</style><body><div class="box1"></div>
</body>
效果如下：
2. 如何使用js来实现：鼠标移入时修改元素的样式
法一：使用addEventListener
element = document.getElementById("box");element.addEventListener("mouseenter",()=>{element.style.backgroundColor = "pink";element.style.border = "1px solid black";
})
element.addEventListener("mouseleave",()=>{element.style.backgroundColor = "";element.style.border = "1px red solid";
})
// 单击事件
element.addEventListener("click", () => {alert("元素被单击了！");
});
法二：直接设置 onmouseenter 和 onmouseleave 属性
element = document.getElementById("box");element.onmouseenter = function () {this.style.backgroundColor = "lightblue";this.style.color = "white";
};element.onmouseleave = function () {this.style.backgroundColor = "";this.style.color = "";
};
3. 驼峰格式与“-”格式相互转化
3.1 “-”格式转化为驼峰格式
let str = "hello-world";
function fun(str){let temp = str.split('-');for(let i=1;i<temp.length;i++){let s = [...temp[i]];s[0] = s[0].toUpperCase();temp[i] = s.join("");}return temp.join("");
}
console.log(fun(str)) // helloWorld
3.2 驼峰格式转换为“-”格式
let str = "helloWorld";
function fun(str){let res = [];for(let i of str){if(i===i.toUpperCase()){res.push("-");res.push(i.toLowerCase());}else{res.push(i)}}return res.join("")
}
console.log(fun(str)) // hello-world