企业宣传网站建设说明书,佛山网站建设定制,内网网站怎么建设,东莞房价2022文章目录 1#xff1a;禁止文字被复制粘贴1.1 Css 处理1.2 Js 处理 2#xff1a;元素垂直水平居中2.1:方案一2.2 方案二2.3 方案三2.4 方案四2.5 方案五 1#xff1a;禁止文字被复制粘贴
1.1 Css 处理
div classtext我不可以复制信息/div
禁止文字被复制粘贴1.1 Css 处理1.2 Js 处理 2元素垂直水平居中2.1:方案一2.2 方案二2.3 方案三2.4 方案四2.5 方案五 1禁止文字被复制粘贴
1.1 Css 处理
div classtext我不可以复制信息/div
div我可以复制
/div
style.text {-webkit-user-select: none;}
/style1.2 Js 处理
script!-- 禁止右键 --document.oncontextmenu () false!-- 禁止文字选择 -- document.onselectstart () false
/script2元素垂直水平居中
2.1:方案一
使用弹性布局父元素设置display: flex另外再设置属性水平布局justify-content: center;和垂直布局 align-items: center;
div classhadiv classchild/div/div
style.ha {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: #000;}.child {width: 80px;height: 80px;background-color: blue;}
/style2.2 方案二
position: absolute; 位移属性
使用position: absolute; 属性各百分之五十top: 50%;left: 50%然后margin减去元素的一半(在已知宽高情况下)
div classhadiv classchild/div/div
style .ha {width: 600px;height: 600px;background-color: grey;position: relative;}.child {position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;width: 200px;height: 200px;background-color: #000;}
/style2.3 方案三
使用calc()函数进行计算这个方法和上面方案二类似
div classhadiv classchild/div/div
style.ha {width: 600px;height: 600px;background-color: grey;position: relative;}.child {position: absolute;top: calc(50% - 100px);left: calc(50% - 100px);width: 200px;height: 200px;background-color: blue;}
/style2.4 方案四
使用 平移属性 transform: translate(x轴y轴)进行位移各减去元素宽高的一半
margin 和 calc() 函数是在已知元素宽高的情况下进行的处理在不知道元素宽高的情况下可以使用transform平移属性进行处理
.child {position: absolute;top: 50%;left: 50%;// transform: translate(-100px, -100px); //已知元素宽高transform: translate(-50%, -50%); // 元素比例width: 200px;height: 200px;background-color: blue;
}2.5 方案五
使用网格布局 父元素声明 display: grid; 子元素使用 align-self: center; justify-self: center;
div classhadiv classchild/div/div
style.ha {width: 600px;height: 600px;background-color: grey;display: grid;}.child {align-self: center;// margin: 0 auto; // 让元素水平居中justify-self: center; // 网格布局的属性width: 200px;height: 200px;background-color: blue;}
/style只在父元素上添加属性
display: grid; align-items: center; justify-content: center;
.ha {width: 600px;height: 600px;background-color: grey;display: grid;align-items: center;justify-content: center;
}
.child {width: 200px;height: 200px;background-color: blue;
}
