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提示文字

设置提示文字颜色（需从父元素开始选中）

.weui-btn-area input::-webkit-input-placeholder{

    /*font-size: 28px;*/

    color:#989898;

            }

设置空格

&nbsp

设置&

&amp

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

随机推荐

能用的单纯形法python代码
网上找了一些代码,发现有一些是不能用的,出现错误说集合为空 1.网上出现了好多次,但是不能用的,只能部分模型能用,比如例子中所示原链接:https://www.jianshu.com/p/b233c ...
MySQL快速生成100W条测试数据
https://blog.csdn.net/qq_16946803/article/details/81870174 1.生成思路利用mysql内存表插入速度快的特点,先利用函数和存储过程在内存表中生 ...
Pycharm----默认字体大小的设置
设定前设定后,修改字体的大小为:15号设置方式:按照截图操作选择后,点击”apply“即可
CentOS7.x安装Wiki.js知识库
近期有个需求,搭建一个知识管理系统,所以就找了几个可作为知识管理的软件,最终定位到wiki.js,之所以选择这个,是看中了它的易部署性,该项目是在2016年12月推出了第一个版本,算是比较新的项目了, ...
js中in关键字的使用方法
1.for...in 对数组或对象的循环/迭代操作对于数组循环出来的是数组元素:对于对象循环出来的是对象属性 2.判断对象是否是数组/对象的元素/属性格式:(变量 in 对象) 当‘对象’是数组时 ...
ComboGrid二级联动以及给二级联动赋默认值
<input name="buyStatus" id="upbuyStatus" style="width: 100%;height: 85%& ...
python--第六天练习题
#1.正则表达式计算 origin = "1 - 2 * ( ( 60 - 30 + ( -40.0 / 5 ) * ( 9 - 2 * 5 / 3 + 7 / 3 * 99 / 4 * 2 ...
数据分析九：互联网征信中的信用评分模型（用户APP使用行为分析）
用户APP使用行为数据分析: 一. 背景及数据介绍: 1. 移动互联网发展背景: 网民规模7.72亿,手机网民规模7.53亿: 2. APP使用热点: 商务交易类应用规模高速增长(网络购物,网上外卖, ...
2018-2019 ACM-ICPC, Asia Jiaozuo Regional Contest
目录 Contest Info Solutions A. Xu Xiake in Henan Province D. Keiichi Tsuchiya the Drift King E. Resist ...
[python]打印异常信息的不同方式
异常捕获 try: execpt Exception as e: print(str(e)) 打印异常信息的方式 1.str(e) 返回字符串类型,只给出异常信息,不包括异常信息的类型,如1/0的异常 ...

HTML-T

随机推荐

热门专题