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
onmousemove=/HideMenu()/ oncontextmenu="return false"
ondragstart="return false" onselectstart ="return false"
onselect="document.selection.empty()"
oncopy="document.selection.empty()" onbeforecopy="return false"
onmouseup="document.selection.empty()">
</body>
加入如下代码，时鼠标的左右键都失效
<body
topmargin="0"
oncontextmenu="return false" ondragstart="return false" onselectstart
="return false" onselect="document.selection.empty()"
oncopy="document.selection.empty()" onbeforecopy="return false"
onmouseup="document.selection.empty()" >
</body>
7.解除网页右键禁止
-
在任意一个网页上点击星号添加书签，在标签栏中找到收藏的书签
-
右击在右键菜单中点击添加网页
-
设置书签名称——在网址栏中输入下面代码，点击保存，遇到不能右键的网页，点击一下这个标签就能解决了
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");})()
右键禁止.png
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 放置一些用户安装的系统管理的必备程式
