每天学习一点点

1.box-shadow:

水平位移 垂直位移 模糊程度 颜色

2.calc(): 用于动态计算长度值

支持’+’,’-’,’*’,’/'运算

width: calc(100% - 100px)

3.transition:

贝塞尔曲线(cubic-bezier

几个常用的固定值:

  • ease:cubic-bezier(.25, .1, .25, 1)
  • liner:cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
  • ease-in:cubic-bezier(.42, 0, 1, 1)
  • ease-out:cubic-bezier(0, 0, .58, 1)
  • ease-in-out:cubic-bezier(.42, 0, .58, 1)
  • In Out . Back(来回的缓冲效果):cubic-bezier(0.68, -0.55, 0.27, 1.55)
 <style>
    .animation {
      width: 50px;
      height: 50px;
      background: #ed3;
      -webkit-transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      -o-transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .animation:hover {
      -webkit-transform: translateX(500px);
      -ms-transform: translateX(500px);
      -o-transform: translateX(500px);
      transform: translateX(500px);
    }
  </style>
</head>
<body>
  <div class="animation"></div>
</body>

4.animation动画

  <style>
    #myDiv {
      width: 300px;
      height: 200px;
      border: 1px solid black;
      -webkit-animation: mymove 5s infinite;
      animation: mymove 5s infinite;
    }
    @-webkit-keyframes mymove {
      50% { border-bottom-left-radius: 50px;}
      50% { border-bottom-right-radius: 50px;}
    }
    @keyframes mymove {
      50% { border-bottom-left-radius: 50px;}
      50% { border-bottom-right-radius: 50px;}
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
</body>

5.合理使用变量

  • 当设计稿中某一类元素都是用相同的字体大小,颜色,行高等样式属性时,可以将这些值存放在变量中
// sass
$direction: left;
// less
@direction: left;
  • css也存在原生变量:

    语法: --变量名

:root {
	--width: 100px;
	--height: 100px;
}
.button {
	width: calc(0.8 * var(--width));
	height: calc(0.8 * var(--height));
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
}

6.使用css实现每个单词首字母大写

.capitalizeFirst-css {
	text-transform: capitalize;
}

text-transform:转换不同元素中的文本

none: 默认
capitalize: 文本中的每个单词以大写字母开头
uppercase: 大写字母
lowercase: 小写字母

7.阻止网页中默认事件

  • 禁止鼠标右键
document.oncontextmenu = function(){
    event.returnValue = false;
}
// 或者直接返回整个事件
document.oncontextmenu = function(){
    return false;
}
  • 禁止选取内容
document.onselectstart = function(){
    event.returnValue = false;
}
// 或者直接返回整个事件
document.onselectstart = function(){
    return false;
}
  • 禁止复制
document.oncopy = function(){
    event.returnValue = false;
}
// 或者直接返回整个事件
document.oncopy = function(){
    return false;
}
以上三种事件,如果只想单纯的禁用鼠标右键,和复制粘贴,还可以直接写在body上面
<body oncontextmenu = 'return false'> </body>

<body onselectstart = 'return false'> </body>

<body oncopy = 'return false'> </body>
  • 禁止网页另存为
// 在body后面加入以下代码
<noscript>
	<iframe src="*.html"></iframe>
</noscript>
  • 禁止网页内容复制
<body
	οnmοusemοve=/HideMenu()/ οncοntextmenu="return false" 
    οndragstart="return false" onselectstart ="return false" 
    οnselect="document.selection.empty()" 
    οncοpy="document.selection.empty()" onbeforecopy="return false" 
    οnmοuseup="document.selection.empty()">
</body>
加入如下代码,时鼠标的左右键都失效
<body
    topmargin="0" 
    οncοntextmenu="return false" οndragstart="return false" onselectstart 
    ="return false" οnselect="document.selection.empty()" 
    οncοpy="document.selection.empty()" onbeforecopy="return false" 
    οnmοuseup="document.selection.empty()" >
    
</body>

7.解除网页右键禁止

  1. 在任意一个网页上点击星号添加书签,在标签栏中找到收藏的书签
  2. 右击在右键菜单中点击添加网页
  3. 设置书签名称——在网址栏中输入下面代码,点击保存,遇到不能右键的网页,点击一下这个标签就能解决了
    javascript:(function() { function R(a){ona = "on"+a; if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; if(document.body) document.body[ona]=null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart");})()
    

在这里插入图片描述

8、Linux中的某些重要的目录:

1、用户可执行的文件: /bin、/usr/bin、/usr/local/bin

2、系统可执行文件: /sbin、/usr/sbin、/usr/local/sbin

3、其他挂载点; /media、/mnt

4、配置:/etc

5、临时文件:/tmp

6、内核和Bootloader: /boot

7、服务器数据:/var、/srv

8、系统信息: /proc、/sys

9、共享库:/lib、/usr/lib、/usr/local/lib

/lib 系统的一些指令

/sbin 一般是至超级用户指令

/usr/bin 你在后期安装的一些软件的运行脚本

/usr/sbin 放置一些用户安装的系统管理的必备程式C](这里写自定义目录标题)

版权声明:本文为qq_36824244原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36824244/article/details/102460696