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;
        }

设置空格

&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

随机推荐

  1. Spring-整合MyBatis-声明式事务

    12.整合Mybatis 步骤: 导入相关jar包 junit mybatis mysql数据库 spring相关 aop织入 mybatis-spring[new] 编写配置文件 测试 12.1.会 ...

  2. DataSet,DataTable,DataView、DataRelation

    一.创建Dataset和DataTable DataSet ds = new DataSet();//DataSetName默认为"NewDataSet" DataTable ta ...

  3. python高性能编程方法一

    python高性能编程方法一   阅读 Zen of Python,在Python解析器中输入 import this. 一个犀利的Python新手可能会注意到"解析"一词, 认为 ...

  4. mousemove([[data],fn])

    mousemove([[data],fn]) 概述 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件.大理石构件来图加工 mousemove事件处理函数会被传递一个变量——事件对象, ...

  5. Flutter 初始化数据完成后再加载页面

    一.初始化数据完成后再加载数据 1.为了达成这个目标尝试了多种方法总是失败 在Init 和didChangeDependencies 初始化数据过也不行 @override void didChang ...

  6. HTML的基础

    HTML:超文本标记语言                            超文本包括:文字.图片.音频.视频.动画等 流程:写好HTML代码后通过浏览器(自动编译HTML代码)展现出效果 HTM ...

  7. MySQL Bug#67718 浅谈B+树索引的分裂优化

    原文链接:http://hedengcheng.com/?p=525 问题背景 今天,看到Twitter的DBA团队发布了其最新的MySQL分支:Changes in Twitter MySQL 5. ...

  8. [UVa12345] Dynamic len (带 修 )

    题意:有n个数编号从0→n-1,两种操作:            Q L R:询问编号为L→R-1的数中共有多少种不同的数             M X Y:将编号为X的数改为Y           ...

  9. LibreOJ #6000. 「网络流 24 题」搭配飞行员

    二次联通门 : LibreOJ #6000. 「网络流 24 题」搭配飞行员 /* LibreOJ #6000. 「网络流 24 题」搭配飞行员 二分图最大匹配 Dinic最大流 + 当前弧优化 */ ...

  10. 一行代码加快pandas计算速度

    一行代码加快pandas计算速度 DASK https://blog.csdn.net/sinat_38682860/article/details/84844964 https://cloud.te ...