HTML-T
a标签跳转
<a href="new_link" target="_blank">在新建页面打开链接</a>。
<a href="new_link">在当前页面打开链接</a>。
禁止选中
整个页面
<body onselectstart="return false"> FROM表单标签(标签属性)(无法获取表单属性)
disabled="disabled"
FROM表单标签(标签属性)(可获取表单属性)
readonly="readonly" DIV LI等(标签样式)
style="pointer-events: none;"
禁止修改页面及开启调试模式等（未测试）
<script>
//这段js要放在页面最下方
var h = window.innerHeight,w=window.innerWidth;
//禁用右键 （防止右键查看源代码）
window.οncοntextmenu=function(){return false;}
//在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
window.onresize = function () {
if (h != window.innerHeight||w!=window.innerWidth){
window.close();
window.location = "about:blank";
}
}
/*好吧，你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度，
但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素（不支持IE9以下浏览器）*/
if(window.addEventListener){
window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);
window.addEventListener("DOMAttributeNameChanged", function(){window.location.reload();}, true);
window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);
window.addEventListener("DOMElementNameChanged", function(){window.location.reload();}, true);
window.addEventListener("DOMNodeInserted", function(){window.location.reload();}, true);
window.addEventListener("DOMNodeInsertedIntoDocument", function(){window.location.reload();}, true);
window.addEventListener("DOMNodeRemoved", function(){window.location.reload();}, true);
window.addEventListener("DOMNodeRemovedFromDocument", function(){window.location.reload();}, true);
window.addEventListener("DOMSubtreeModified", function(){window.location.reload();}, true);
}
</script>
同上（未测试）
一、屏蔽F12 审查元素
document.onkeydown = function(){
if(window.event && window.event.keyCode == ) {
alert("F12被禁用");
event.keyCode=;
event.returnValue=false;
}
if(window.event && window.event.keyCode == ) {
window.event.keyCode = ;
}
if(window.event && window.event.keyCode == ) {
alert(str+"\n请使用Del键进行字符的删除操作！");
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.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;
}
}
四、屏蔽复制
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.oncut = 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;
}
}
这种很适合小说网站，毕竟版权珍贵，被别人随意copy走内容就不好了
六、屏蔽选中
document.onselectstart = 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;
}
}
禁用预先调试
var threshold = ; // 打开控制台的宽或高阈值
// 每秒检查一次
window.setInterval(function() {
if (window.outerWidth - window.innerWidth > threshold ||
window.outerHeight - window.innerHeight > threshold) {
// 如果打开控制台，则刷新页面
window.location.reload();
}
}, 1e3);
快捷判断
{{moneyrecordinfo.totalmoney||0}}
<!-- 前面为true则显示，否则显示后面 -->
文字显示两行，且超出部分隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
文字显示一行，且超出部分隐藏
word-break: keep-all;
/*不换行*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*多余文字转换省略号*/
text-overflow: ellipsis;
text中划线
text-decoration: line-through;
下划线
text-decoration: underline;
文本居中
text-align: center;
input提示文字
<input placeholder="text" >
设置提示文字颜色（需从父元素开始选中）
.weui-btn-area input::-webkit-input-placeholder{
/*font-size: 28px;*/
color:#989898;
}
设置空格
 
设置&
&
CSS记录
宽
width 高
height 布局
display
display:flex 阴影
box-shadow
box-shadow: 10rpx 10rpx 10rpx #909090; 边角弧度
border-radius
border-radius:20px;
border-radius:50%; 透明度
opacity 渐变色
background: linear-gradient(#b0b1f3, #8787f0); 内边距
padding 外边距
margin 上
top
下
bottom
左
left
右
right 引入网络图片
style="background-image:url({{item.thumb}});" 设置字体行距
line-height:22px
设置字体水平居中
text-align:center; 设置元素内第一个元素
.xj-smallspec :first-child{
margin: 0;
background: #000;
}
设置最后一个元素
last-child
颜色循环渐变
-webkit-animation: hue 6s infinite linear;
vw(当前页面宽度视区等分为100，取值)
vh(当前页面高度视区等分为100，取值)
详见：https://www.zhangxinxu.com/study/201209/vw-vh-to-pixel.html
随机推荐
- [唐胡璐]Selenium技巧 - 处理Windows程序(进程)
Selenium WebDriver java 提供了一个专门的WindowsUtils类去和Windows操作系统交互。 就像我们之前说过有时候跑完脚本后，IEDriverServer.exe进程没 ...
- ComboGrid二级联动以及给二级联动赋默认值
<input name="buyStatus" id="upbuyStatus" style="width: 100%;height: 85%& ...
- JMeter性能测试工具
1.官网资源 地址:https://jmeter.apache.org/download_jmeter.cgi window下载zip版本 options配置-选择语言-简体(jmeter.prope ...
- rect dict tect 词根助记
rect: r (跑)e(E 槽子)ct(不停的跑) 就是直的 dict: d(椅子)i(人)C(开口说)t(T 桌子) : 椅子前站人 开口说前面是桌子 tect: tt(TT像盖子)EC(E ...
- java获取windows和linux下本机ip通用方法
public InetAddress getFirstNonLoopbackAddress(boolean preferIpv4, boolean preferIPv6) throws SocketE ...
- 032_备份 MySQL 的 shell 脚本(mysqldump 版本)
#!/bin/bash#定义变量 user(数据库用户名),passwd(数据库密码),date(备份的时间标签)#dbname(需要备份的数据库名称,根据实际需求需要修改该变量的值,默认备份 mys ...
- [Luogu] 区间统计Tallest Cow
https://www.luogu.org/problemnew/show/P2879 差分 | 线段树 #include <iostream> #include <cstdio&g ...
- [BJOI2019]排兵布阵 DP
[BJOI2019]排兵布阵 DP 比较好想的DP,设\(dp[i][j]\)表示第\(i\)个城堡时,已派出\(j\)个士兵.决策时,贪心派出恰好严格大于某一玩家派出的数量的两倍(不然浪费).我们发 ...
- LibreOJ #119. 最短路
二次联通门 : LibreOJ #119. 最短路 /* LibreOJ #119. 最短路 堆优化的Dijkstra */ #include <cstring> #include < ...
- _cdecl与_stdcall区别
_cdecl与_stdcall是最常用的的两种函数调用修饰,区别在于函数返回时,清理栈(恢复栈平衡)是caller做还是被调函数做. : _cdecl int add1(int a, int b) : ...