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
随机推荐
- HBuilderX 5+APP MUI 入门
这一套东西是用来开发app的,可以用html.js什么的写app然后给你打包就能安装到手机上,也可以轻易跨端(需要使用vue,然而我还没有熟练). HBuilder:一个敲代码的软件,敲前端代码超级方 ...
- 模糊查询的sql语句
Java程序中使用的sql语句一直不明白是什么作用,在网上搜索了一些资料,看到一篇博客,稍微解答了具体每条代码的作用,因为作者加了详细的注解,可以作为参考 <JavaWeb dao层条件查询(模 ...
- Oracle 按一行里某个字段里的值分割成多行进行展示
with t as ( select '111,222,333' col from dual union all select '444,555,666' col from dual ) , leve ...
- [Google Guava] 8-区间
原文链接 译文链接 译文:沈义扬 范例 1 List scores; 2 Iterable belowMedian =Iterables.filter(scores,Range.lessThan(me ...
- 【题解】求细胞数量-C++
题目描述一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右若还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.(1<=m,n<=100)? 输入输出格式输入格 ...
- learning express step(四)
learning express route function const express = require('express'); const app = express(); app.get(' ...
- 数据结构实验之栈与队列四：括号匹配（SDUT 2134）
#include <bits/stdc++.h> using namespace std; typedef long long ll; char s[100]; char a[100]; ...
- JavaWeb_(Spring框架)认识Spring中的aop
1.aop思想介绍(面向切面编程):将纵向重复代码,横向抽取解决,简称:横切 2.Spring中的aop:无需我们自己写动态代理的代码,spring可以将容器中管理对象生成动态代理对象,前提是我们对他 ...
- POJ 3616 Milking Time ——（记忆化搜索）
第一眼看是线段交集问题,感觉不会= =.然后发现n是1000,那好像可以n^2建图再做.一想到这里,突然醒悟,直接记忆化搜索就好了啊..太蠢了.. 代码如下: #include <stdio.h ...
- VSCode-VUE模板文件
编辑自己的代码片段 ctrl+shift+p 输入snippet 选择 'Preferences: Configure User Snippets' 输入vue 选择vue.json,会打开vue.j ...