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
随机推荐
- Java集合--ArrayList出现同步问题的原因
1 fail-fast简介 fail-fast 机制是java集合(Collection)中的一种错误机制.当多个线程对同一个集合的内容进行操作时,就可能会产生fail-fast事件.例如:当某一个线 ...
- 洛谷P1169 棋盘制作【悬线法】【区间dp】
题目:https://www.luogu.org/problemnew/show/P1169 题意:n*m的黑白格子,找到面积最大的黑白相间的正方形和矩形. 思路:传说中的悬线法!用下面这张图说明一下 ...
- docker harbor 清理释放存储空间
0.harbor界面端清理镜像 1.停止docker harbor docker-compose stop 2.预览运行效果 docker run -it --name gc --rm --volum ...
- paramiko多线程远程执行命令
import paramiko import sys import getpass import threading import os def rcmd(host=None, port=22, us ...
- js数据类型自动转化规律
1. 原始数据遇运算符 1. +运算符 1) 如果算子两侧都是字符串,返回拼接结果: 2) 如果算子两侧不全是字符串,则根据实际情况: 如果需要字符串,就调用String(); true + &quo ...
- React中生命周期
1.过时的生命周期(v16.3之前) 1.当前组件初次渲染: 绿色表示执行顺序. constructor(): 如果不需要初始化,可以直接省略,会自动补全该函数. 可以在这个方法中初始化this.st ...
- House Lawn Kattis - houselawn
Problem You have just bought a new house, and it has a huge, beautiful lawn. A lawn that needs cutti ...
- HDOJ->考新郎(sdut1021)
考新郎 Problem Description 在一场盛大的集体婚礼中,为了使婚礼进行的丰富一些,司仪临时想出了有一个有意思的节目,叫做"考新郎",具体的操作是这样的: 首先,给每 ...
- P2119 魔法阵
原题链接 https://www.luogu.org/problemnew/show/P2119 YY同学今天上午给我们讲了这个题目,我觉得她的思路很好,特此写这篇博客整理一下. 50分:暴力枚举 ...
- fok函数
一.fork函数是什么 fork函数将运行着的程序分成2个(几乎)完全一样的进程.如下图: 进程1在进程关系中我们称之为父进程,进程2就是通过fork产生的,我们叫他子进程.这两个进程在fork执行完 ...