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

随机推荐

[转载]Java 内存分配全面浅析
Java 内存分配全面浅析 2013-02-20 17:54:45 袭烽阅读数 91353更多分类专栏: java基础本文将由浅入深详细介绍Java内存分配的原理,以帮助新手更轻松的学习Ja ...
SSH自动断开处理
解决ssh登录后闲置时间过长而断开连接时我们通过终端连接服务器时,当鼠标和键盘长时间不操作,服务器就会自动断开连接,我们还的需要重新连接,感觉很麻烦,总结一下解决此问题的方法方法一. 修改/etc ...
团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
02_通过位置变量创建 Linux 系统账户及密码
#!/bin/bash#$1 是执行脚本的第一个参数,$2 是执行脚本的第二个参数useradd "$1"echo "$2" | passwd --stdin ...
chrome扩展开发实战入门之一－hellocrx
后记:在写这篇文章时,我还没搞懂chrome扩展的基本原理.后来才明白,最简单(且实用)的扩展只需要manifest.json和content_scripts.js两个文件,无需background. ...
'com.example.mybatisplus.mapper.PersonMapper' that could not be found.
通常有两种原因,配置原因,或者是mapper相关文件,mapper.java或 mapper.xml内部错误如果是配置原因解决方式1 统一配置mapper //import org.mybatis ...
异步时钟FIFO（一）
FIFO一般用于通过两个不同时钟域的数据传输.一个水池有进和出两个通道,由于进出口水流不一致所以需要水池加以缓冲.堆栈也是相当于水池的作用.如果输入端不是连续的数据流,可以通过堆栈来调节使数据以稳定的 ...
P4781 拉格朗日插值
#include <bits/stdc++.h> using namespace std; #define rep(i,a,n) for (int i=a;i<n;i++) #def ...
Codeforces 1272 A-E
Codeforces 1272 A-E A Three Friends 直接枚举所有情况,共$3\times 3\times 3=27$种. code #include<bits/stdc+ ...
[题解] [CF 1250J] The Parade
题面题目大意: 给定一个 $n$ , 所有军人的数量均在 $[1, n]$ 给定 $a_i$ 代表高度为 $i$ 的军人的个数你要将这些军人分成 $k$ 行, 满足下面两个条件 ...

HTML-T

随机推荐

热门专题