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.解除网页右键禁止
-
在任意一个网页上点击星号添加书签,在标签栏中找到收藏的书签
-
右击在右键菜单中点击添加网页
-
设置书签名称——在网址栏中输入下面代码,点击保存,遇到不能右键的网页,点击一下这个标签就能解决了
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](这里写自定义目录标题)