原文地址:k2one
作者： janing
sql 联表搜索
/* */ SELECT SU.*, AR.* FROM `t_user_role` UR INNER JOIN t_sys_user SU ON UR.uid = SU.t_id INNER JOIN t_sys_auth_role AR ON UR.group_id = AR.id
JS数组复制，不带指针玩
来源：咸鱼的星空
/*
*/
var array1 = new Array("1","2","3");
var array2;
array2 = array1.concat();
array1.length = 0;
alert(array2); //返回1、2、3
Janing-ERPv1.0
html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="__PUBLIC__/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/install.js"></script>
<link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css" />
<link rel="stylesheet" href="__PUBLIC__/css/style.css" />
</head>
<body>
<div class="page-con">
<div class="page-left color-vh">
<a href="#" class="logo-con">
<img src="__PUBLIC__/images/logo.png">
</a>
<a href="#" class="left-con a-black">
<span class="glyphicon glyphicon-user"></span>
<i>人员总览</i>
</a>
<a href="#" class="left-con a-black">
<span class="glyphicon glyphicon-star"></span>
<i>角色设置</i>
</a>
<a href="#" class="left-con a-black">
<span class="glyphicon glyphicon-tower"></span>
<i>权限设置</i>
</a>
</div>
<script>
var url_end=(window.location.pathname).split("/")[3];
$("#"+url_end).addClass("active");
</script>
<div class="page-right">
<div class="page-right-top">
<div class="p-r-t-left">
<button class="xbtn xbtn-trans">
<span class="glyphicon glyphicon-th"></span>
</button>
</div>
<div class="p-r-t-right">
<button class="xbtn xbtn-trans">通知</button>
<button class="xbtn xbtn-trans">账户</button>
</div>
</div>
<div class="page-right-title">
人员总览
</div>
<div class="page-right-main">
</div>
</div>
</div>
</body>
</html>
CSS
@CHARSET "UTF-8";
/*公用*/
body{
background:#fafafa;
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
font-family:Trebuchet MS,"微软雅黑";
}
.auto-center{margin:auto;left:0;right:0;}
.auto-middle{margin:auto;top:0;bottom:0;}
a,a:hover,a:visited,a:focus,a:link{text-decoration:none;}
i{font-style:normal;}
/*配色*/
.xbtn{
height:30px;
line-height:30px;
min-width:80px;
padding:0 5px;
border:1px solid transparent;
}
.xbtn-success{background:#64C5AB;color:#fff;border-color:#64C5AB;}
.xbtn-warming{background:#FF9466;color:#fff;border-color:#FF9466;}
.xbtn-danger{background:#FF6D6E;color:#fff;border-color:#FF6D6E;}
.xbtn-info{background:#00d5ec;color:#fff;border-color:#00d5ec;}
.xbtn-black{background:#1B1E25;color:#fff;border-color:#fff;}
.xbtn-black:hover{background:#fefefe;color:#1B1E25;border-color:#1B1E25;}
.xbtn-trans{background:transparent;color:#666;border-color:transparent;}
.color-vl{}
.color-l{}
.color-m{}
.color-h{background:#303543;}
.color-vh{background:#1B1E25;}
.a-black{
background:#1B1E25;
color:#fff;
}
.a-black span{
color:#1B1E25;
text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0;
}
.a-black:hover,.a-black.active{background:#303543;color:#fff;}
.a-black:hover span,.a-black.active span{color:#303543;}
/*login*/
/*login-bg*/
.login-background{
background:#1B1E25;
height:100%;
width:100%;
display:block;
display: -webkit-flex; /* Safari */
display: flex;
flex-direction:column-reverse;
}
.login-background > *:not(.footer-con){
position:absolute;
margin:auto;
top:0;
bottom:0;
}
.login-bg{
height:90%;
width:100%;
display:block;
overflow:hidden;
}
@media screen and (min-width:1201px){
.login-bg img{width:100%;}
}
@media screen and (max-width:1200px){
.login-bg img{height:100%;}
}
/*login-main*/
.login-main{
width:300px;
height:420px;
background:rgba(0,0,0,.9);
position:absolute;
right:20%;
}
.login-main .logo-con{
height:80px;
width:80px;
position:relative;
margin:30px auto;
display:block;
}
.login-main .logo-con img{
width:100%;
height:100%;
}
.login-main form{
display: -webkit-flex; /* Safari */
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.login-main form :not([type="submit"]):not(span){
background:transparent;
border:none;
border-bottom:1px solid #999;
width:80%;
height:30px;
line-height:30px;
font-size:16px;
color:#bbb;
padding:0 10px
}
.login-main form span{
margin-top:10px;
color:#eee;
font-weight:bold;
font-size:18px;
}
.login-main form [type="submit"]{
margin-top:30px;
width:60%;
}
/*footer*/
.footer-con{
color:#999;
height:40px !important;
line-height:40px;
text-align:center;
}
/*con*/
.logo-con{
width:100%;
height:60px;
line-height:60px;
text-align:center;
}
.logo-con img{
width:40px;
}
.page-con{
display:-webkit-flex;
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
align-items:stretch;
height:100%;
}
.page-left{
height:100%;
width:60px;
display:-webkit-flex;
display:flex;
flex-flow:column nowrap;
justify-content:flex-start;
background:
}
.left-con{
height:60px;
white-space:nowrap;
box-sizing:border-box;
line-height:60px;
overflow:hidden;
}
.page-left:hover {
width:200px;
}
.left-con span{
font-size:18px;
margin:20px;
}
.page-right{
height:100%;
width:auto;
display:-webkit-flex;
display:flex;
flex-grow:1;
flex-flow:column nowrap;
}
.page-right-top{
width:100%;
display:-webkit-flex;
display:flex;
justify-content:space-between;
background:#fff;
height:30px;
}
.page-right-title{
border-bottom:1px double #2ABBAE;
background:#fff;
color:#333;
height:30px;
line-height:30px;
text-align:center;
}
.page-right-main{
display:-webkit-flex;
display:flex;
width:100%;
flex-grow:1;
}
css实现文字描边
CSS
/* text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0; */
如何让padding不影响width？box-sizing 帮到您
来源：W3school
/*
*/
div{box-sizing:border-box}
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
点击input，button会有外发光？我来帮你去掉
css
/*
*/
button{outline:inherit;}
input,textarea{-webkit-appearance:none;}
改变滚动条scroll样式
webkit-css部分
/*
*/
::-webkit-scrollbar {
width: 5px;
height:5px;
} /* 这是针对缺省样式 (必须的) */
::-webkit-scrollbar-track {
background-color: #eee;
} /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb {
background-color: #666;
} /* 滑块颜色 */
::-webkit-scrollbar-button {
display:none;
} /* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner {
background-color: #eee;
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
来源：caliban
firefox办法
/*
*/
/* AGENT_SHEET */
/* 应用于所有情况
@-moz-document url-prefix(chrome://), url-prefix(about:),
url-prefix(file:///), url-prefix(http://), url-prefix(https://){
*/
/* 滚动条背景基本样式 */
scrollbar{
-moz-appearance: none !important;
background-color: transparent !important;/* 滚动条背景透明 */
background-image: none !important; /* 滚动条背景图案不显示 */
position: relative !important; /* 更改滚动条的定位方式为相对 */
overflow: hidden !important;
z-index: 999999999 !important; /* 把滚动条提到Z轴最上层 */
}
/* 滚动条按钮基本样式 */
scrollbar thumb{
-moz-appearance: none !important;
background-color: rgba(0,100,255,.25) !important;
border-radius: 0px !important;
border: 1px !important; /* 滚动条按钮边框 */
border-color: rgba(0,100,255,.1) !important; /* 滚动条按钮边框颜色和透明度 */
}
/* 滚动条按钮:鼠标悬停与点击拖动时基本样式 */
scrollbar:hover thumb,
scrollbar thumb:hover,
scrollbar thumb:active {
background-color: rgba(0,100,255,.75) !important;
border: 0px !important;
}
/* 垂直滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="vertical"]{ margin-left: -5px !important;
min-width: 5px !important; max-width: 5px !important;
}
/* 垂直滚动条按钮的左边框样式 */
scrollbar thumb[orient="vertical"]{
border-style: none none none solid !important;
}
/* 水平滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="horizontal"]{ margin-top: -5px !important;
min-height: 5px !important; max-height: 5px !important;
}
/* 水平滚动条按钮的上边框样式 */
scrollbar thumb[orient="horizontal"]{
border-style: solid none none none !important;
}
/* 去除垂直与水平滚动条相交汇的角落 */
scrollbar scrollcorner{display: none ! important; }
/* 滚动条两端按钮不显示 */
scrollbar scrollbarbutton { display: none ! important; }
/* 滚动条两端按钮，需要先删掉上面一行
scrollbarbutton{ -moz-appearance: none !important;
position: relative !important;
overflow: hidden !important;
background-color: rgba(0,100,255,.25) !important;
border: none !important;
}
scrollbar:hover scrollbarbutton, scrollbar scrollbarbutton:hover{
background-color: rgba(0,100,255,.75) !important;
}
/* 竖滚动条两端按钮的高度
scrollbar[orient="vertical"] scrollbarbutton {
max-height:10px !important; min-height:10px !important;
}
/* 横滚动条两端按钮的宽度
scrollbar[orient="horizontal"] scrollbarbutton {
max-width: 10px !important; min-width: 10px !important;
}
*/
/*
} */
来源：http://www.w3cways.com/1670.html
IE浏览器css设置滚动条
| 滚动条样式 | 支持情况 | 支持浏览器版本 | 可否继承 | 描述 |
|---|---|---|---|---|
| scrollbar-3dlight-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头左上边缘的颜色 |
| scrollbar-highlight-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头左上边缘的颜色 |
| scrollbar-face-color | IE特有属性 | IE5.5+ | y | 设置滚动框和滚动条箭头的颜色 |
| scrollbar-arrow-color | IE特有属性 | IE5.5+ | y | 设置滚动条箭头的颜色 |
| scrollbar-shadow-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头右下边缘的颜色 |
| scrollbar-dark-shadow-color | IE特有属性 | IE5.5+ | y | 设置滚动条槽的颜色 |
| scrollbar-base-color | IE特有属性 | IE5.5+ | y | 设置滚动条主要构成部分的颜色 |
| scrollbar-track-color | IE特有属性 | IE5.5+ | y | 设置滚动条轨迹组成部分的颜色 |
腾讯视频下载后转换成MP4格式
node.js 阻塞式、非阻塞式（同步、异步处理）
//input.txt内容 测试文字
阻塞式（同步）
var fs = require("fs");
var data = fs.readFileSync('input.txt');
console.log(data.toString());
console.log("程序执行结束!");
//输出
测试文字
程序执行结束!
非阻塞式（）
var fs = require("fs");
fs.readFile('input.txt', function (err, data) {
if (err){
console.log(err.stack);
return;
}
console.log(data.toString());
});
console.log("程序执行完毕");
//输出
程序执行完毕
测试文字