搜索到
4
篇与
的结果
-
【前端】 - 禁止页面中使用F12/复制/粘贴/鼠标右键操作 写法一下面的写法是我从网上找来的，功能倒是能实现，但是有些方法老旧了。代码示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>禁止页面中使用F12/复制/粘贴/鼠标右键操作</div> <script> //禁用F12 window.onkeydown = window.onkeyup = window.onkeypress = function (event) { // 判断是否按下F12，F12键码为123 if (event.keyCode == 123) { event.preventDefault(); // 阻止默认事件行为 window.event.returnValue = false; } } // 禁止鼠标右键 document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try { var the = event.srcElement; if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { return false; } return true; } catch (e) { return false; } } // 禁止复制 document.oncopy = function (event) { if (window.event) { event = window.event; } try { var the = event.srcElement; if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { return false; } return true; } catch (e) { return false; } } // 禁止粘贴 document.onpaste = function (event) { if (window.event) { event = window.event; } try { var the = event.srcElement; if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { return false; } return true; } catch (e) { return false; } } </script> </body> </html> 方法二方法好多，这里参考官档：KeyboardEvent对象描述了用户与键盘的交互。比如长按shift键时、按下Ctrl键时、触发的事件。看下官档的几个实例方法就能明白了。Element，这类中结合上面的KeyboardEvent对象就能实现我们本篇博客的大部分需求了，重点在左边菜单的事件栏。代码示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>禁止页面中使用F12/复制/粘贴/鼠标右键操作</title> </head> <body> <div>禁止页面中使用F12/复制/粘贴/鼠标右键操作</div> <script> document.addEventListener('contextmenu', evt => { alert("鼠标右键已禁用！") evt.preventDefault() }) document.addEventListener('copy', evt => { alert("禁止拷贝！") evt.preventDefault() }) document.addEventListener('cut', evt => { alert("禁止剪切！") evt.preventDefault() }) document.addEventListener('keydown', evt => { // 所有的键盘事件都会可以通过evt.key或者获取到，你多打印操作下就知道了 alert(evt.key, evt.code) // 因为keyCode的方法不在推荐使用，我们可以通过下面的方法来处理 // if (evt.keyCode === 123){ // alert("禁止F12！") // evt.preventDefault() // } // 以字符串的形式进行对比，想禁用哪个键直接按照下面的方式写就完了 // if (evt.key === "F12"){ // alert("禁止F12！") // evt.preventDefault() // } }) </script> </body> </html> -
【前端】- 移动端布局 code here...教学内容移动布局原理1. 重要术语(1) 术语序号名称描述1像素图像显示最小单位,PPI(像素分辨率)2DPR设备像素比 = 设备像素 / CSS 像素3视口可视窗口 viewport,分布局/视觉/理想三类2. 三种视口描述三种视口类型是人为的划分序号名称描述1布局视口Layout viewport设备无关, 通常默认980px,显示完整网页2视觉视口visual viewport设备相关,用户手机屏幕可见部分,通过缩放查看全部3理想视口idea viewport不必缩放就可查看全部,针对移动端进行布局3. 解决方案视口属性:<meta name="viewport" content="width=device-width, initial-scale=1.0" />序号属性值描述1width=device-width布局视图 = 视觉视图2initial-scale=1.0视觉视图 = 理想视图移动端布局单位很多,经典的百分比,em 等,但目前主流单位是: rem + vw,也称"rem-vw`解决方案4. 推荐 vscode 插件名称: px to rem & rpx,原名为cssrem自动将px换算为rem须在插件中设置1rem = ...px,默认为16px,通常设置为1rem=100px以方便计算5. 操作步骤布局前,必须先确定 1rem = ?, 1vw =?5.1 1vw = ?选择某款手机做为理想视口的基础,如iPhone11: 375px100vw = 100% = 375px, 所以 1vw = 3.75px5.2 1rem = ?1rem 默认为游览器字号16px推荐: 1rem = 100px1rem不要在<html>中写死, 应该通过100vw计算出来5.3 总结序号属性值描述11vw = 3.75px以iPhone6/11屏幕宽度为基准21rem = 100vw / 3.75即1rem = 100px, 方便计算
-
【前端】- flex,grid布局 code here...教学内容1. Flex 布局1.1 必知术语序号术语描述1弹性容器拥有 display:flex/inline-flex 属性,使用 flex 弹性布局的区块2弹性项目弹性容器的"子元素"3主轴弹性项目排列时参考的轴线,有水平和垂直二种4交叉轴与主轴垂直的布局参考线1.2 flex 容器属性序号属性描述1display元素显示类型(内部和外部)2flex-flow主轴方向与项目是否允许换行3place-content容器剩余空间在项目之间进行分配4place-items项目在交叉轴上的对齐方式常用属性值演示:(1) display序号属性描述1flex外部块级,内部子元素弹性2inline-flex外部行内,内部子元素弹性默认外部为块级, 即display: block-flex与display:flex同义外部内联: 指元素宽度自动收缩到内容宽度,多个该元素会同行显示(2) flex-flowflex-flow,是 flex-direction,flex-wrap属性的简化序号属性描述1row nowrap主轴水平, 不换行(默认)2row wrap主轴水平, 允许换行3column nowrap主轴垂直, 不换行4column wrap主轴垂直,允许换行(3) place-content以最常见的从左到右水平排列为例,即起始线从左侧开始序号属性描述1start左对齐: 空间在所有项目的右侧(默认值)2end右对齐: 空间在所有项目的左侧3center水平居中: 空间在所有项目二端平均分配4space-between二端对齐: 空间在除二端元素之外平均分配5space-around分散对齐: 空间每个项目二侧平均分配6space-evenly平均对齐: 空间在每个项目之间平均分配(4) place-items以最常见的从上到下垂直排列为例,即起始线从顶部开始序号属性描述1stretch拉伸: 默认值, 自动拉伸成等高列2start顶对齐: 项目从交叉轴起始线开始排列3end底对齐: 项目从交叉轴终止线开始排列4center居中对齐: 项目在交叉轴中居中显示1.3 flex 项目属性序号属性描述1place-self交叉轴上对齐某个项目2flex项目在主轴中的绽放因子与宽度3order项目在主轴上的顺序(1) place-self在块方向和内联方向上对齐单个项目,flex 特指交叉轴是align-self,justify-self合并简写序号属性描述1stretch拉伸: 默认值, 自动拉伸成等高列2start顶对齐: 项目从交叉轴起始线开始排列3end底对齐: 项目从交叉轴终止线开始排列4center居中对齐: 项目在交叉轴中居中显示(2) flex设置项目在主轴上的缩放因子与计算宽度flex: flex-grow flex-shrink flex-basis2.1 单值语法序号属性描述1flex: 1等价flex: 1 1 auto, 自动在主轴上收缩2flex: 10emflex-basis:10em,项目宽度,覆盖width2.2 双值语法序号属性描述1flex: 1 2等价flex: 1 2 auto,主轴按 1:2 分配给项目2flex: 1 10emflex: 1 1 10em,项目宽度,覆盖width2.3: 三值语法序号属性描述1flex: 0 1 auto默认值, 不放大,可缩小,宽度自动2flex: autoflex: 1 1 auto,全响应式3flex: noneflex: 0 0 auto,非响应式(3) order规则序号属性描述1order 0默认值, 显示顺序与源码顺序一致2order: 2显示在<2的右侧3order: -2允许负数了解更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox2. Grid 布局2.1 必知术语序号术语描述1网格容器拥有 display: grid/inline-grid 属性,使用 grid 布局的区块2网格项目网格容器的"子元素"3单元格每个项目所在的空间, 在容器布局单元,对用户不可见4网格区域由一个或多个单元格构成, 可容纳一个或外个项目2.2 Grid 容器属性序号属性描述1display元素显示类型(内部和外部)2grid-template-rows / columns设置显式网格3grid-auto-rows / columns设置隐式网格行高/列宽4grid-auto-flow设置项目在容器中排列方向5gap设置轨道间隙6place-content容器空间在项目中的分配方式7place-items单元格空间在项目中的分配方式常用属性值演示:(1) display序号属性描述1grid外部块级,内部子元素 网格布局2inline-flex外部行内,内部子元素网格布局(2) grid-template-rows / columns: 显式网格序号属性值描述1auto默认值,单列多行,按源码顺序垂直排列250px 60px 100px指定行/列的固定宽度31fr 2fr 1frfr比例, 行/列按比例占据全部空间410% auto minmax(3em, 10em)支持相对/绝对单位和最大小最小值5repeat(3, 1fr)1fr 1fr 1fr简写6repeat(2, 20em 1fr)20em 1fr 20em 1fr简写7repeat(2, 20em 1fr)20em 1fr 20em 1fr简写8repeat(auto-fit, minmax(50px,1fr))最小 50px,空间足够会发尽量充满9repeat(auto-fill, minmax(50px,1fr))最小 50px,空间足够也不会放大10fit-content(200px)等价于minmax(auto,max-content/200px)难点分析:/* auto-fit: 容器自动收容到内容宽度,没有剩余空间 */ grid-template-columns: repeat(auto-fit, 100px); /* 容器不会自动收缩,如果内容不足会产生剩余空间 */ grid-template-columns: repeat(auto-fill, 100px); /* 经常与minmax()配合使用,实现响应式布局 */ /* 项目最小100px,空间足够会自动伸展到全部可用空间 */ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 项目最小100px,但不会自动伸展,哪怕空间足够 */ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 所以, auto-fill 与 minmax配合意义不大, 不如直接使用单值 */(3) grid-auto-rows / columns: 隐式网格该属性描述了在网格容器之外的项目应该占据的行高/列宽究竟是行高还是列宽,由grid-auto-flow属性决定序号属性值描述1auto默认值,单列多行,按源码顺序垂直排列2100px / 1fr指定行/列的固定宽度3min-content / min-contentfr比例, 行/列按比例占据全部空间4minmax(100px,1fr支持相对/绝对单位和最大小最小值(4) grid-auto-flow: 排列方向该属性描述了在网格容器之外的项目应该占据的行高/列宽究竟是行高还是列宽,由grid-auto-flow属性决定序号属性值描述1row默认值,水平/行方向排列,空间不足换行显示2column垂直/列方向排列,空间不足换列显示3row dense行方向排列,尽量紧凑排列不浪费空间4column dense列方向排列, 尽量紧凑排列不浪费空间(5) gap: 轨道间隙与margin不一样,该间隙仅存在于轨道之间gap: row-gap column-gap简写序号属性值描述1gap: 0默认值, 间隙2gap: 10px 5px行轨间隙 10px,列轨间隙 5px3gap: 1em行与列间隙相等,都是 1em(6) place-content所有项目在"容器"中的对齐方式, 即剩余空间在项目之间的分配方式属性生效前提: 容器中存在剩余空间place-content: 块/垂直方向 内联/水平方向序号属性描述1start start左对齐: 空间在所有项目的右侧(默认值)2end end右对齐: 空间在所有项目的左侧3center center水平居中: 空间在所有项目二端平均分配4center二值相同,可只写一个5start end垂直向上, 水平居右6space-between二端对齐: 空间在除二端元素之外平均分配7space-around分散对齐: 空间每个项目二侧平均分配8space-evenly平均对齐: 空间在每个项目之间平均分配(7) place-items所有项目在"单元格"中的对齐方式, 即剩余空间在单元格之间的分配方式属性生效前提: "单元格"中存在剩余空间,即项目设置了width/height语法:place-items:垂直方向 水平方向序号属性描述1start start左对齐: 空间在所有项目的右侧(默认值)2end end右对齐: 空间在所有项目的左侧3center center水平居中: 空间在所有项目二端平均分配4center二值相同,可只写一个5start end垂直向上, 水平居右2.3 Grid 项目属性(1) grid-row / column语法:grid-row/column: 行或列起始线 / 行或列终止线或跨越的行或列数量序号属性描述1auto默认占据一个单元格,可不写21 / 3起始编号1, 终止编号332 / span 3起始编号2, 跨越2列或列空间4span 2省去第 1 个参数,从当前位置开始,占据二个单元空间5span 2 / span 2垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域(2) grid-area语法:grid-area: 行起始 / 列起始 / 行结束 / 列结束与grid-row/column相比,grid-arwa是二维的序号属性描述1auto默认值, 由浏览器根据项目数量自动分配23 / 1 / 5 / 3创建一个由3 / 1 / 5 / 3四个编号构成的空间31 / 1 / span 3 / span 2从 1 行 1 列开始,占据 3 行 2 列4span 2 / span 2垂直占 2 格,水平占 2 格,即 4 个单元格组成的区域5span 3跨 3 行,其它默认(2) place-self语法:place-self: 垂直方向 水平方向设置某个项目,在单元格中的对齐方式序号属性描述1auto默认值, 由浏览器根据项目数量自动分配2start end垂直居上,水平居右31 / 1 / span 3 / span 2从 1 行 1 列开始,占据 3 行 2 列4center center垂直,水平均居中5center二值相同,可只写一个了解更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout
-
【前端】- Markdown语法 code here... * @Description: * @Version: 2.0 * @Author: haiyangcc * @Date: 2022-03-16 20:30:44 * @LastEditors: haiyangcc * @LastEditTime: 2023-06-05 03:55:57 markdown 语法1. 标题# level 1 headline ## level 2 headline ### level 3 headline #### level 4 headline ##### level 5 headline ###### level 6 headline2. 列表2.1 无序列表item1item2item3subItem3-1subItem3-2subItem3-32.2 有序列表item1item2item3subItem3-1subItem3-2subItem3-33. 代码单行: const box = document.querySelector('#box")多行namespace core; class Demo { // ... }4. 表格idnameemailsalary1H老师H@qq.com1234562S老师s@qq.com55555553Y老师Y@qq.com6666665. 图片> 语法: 链接:深海远洋: http://www.shyy.vip
