spfLinux的博客

转载 less语法

test.less/*多行注释*///单行注释/*声明变量*/@jdRed:#e4393c;@thinBorder:3px;@halfOpacity:0.6;@baseFont:'SimHei';.box3{ font:@baseFont; background: rgba(0,0,0,@halfOpacity); border:@thinBorder solid

转载 初识less

hello.less@primarycolor:#FF7F50;@color:#800080;h1{ color:@primarycolor;}h3{ color:@color;}编译成hello.cssh1 { color: #FF7F50;}h3 { color: #800080;}hello.html Title

转载 保护网站资源不被随意下载

document.onkeydown=function(){ var e = window.event||arguments[0]; if(e.keyCode==123){ alert('请尊重劳动成果！网址XXX'); return false; }else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode

转载 HTTPS

参考：百度开发者中心点击打开链接HTTPS可以认为是HTTP+TLS。TLS是传输层加密协议，它的前身是SSL协议，最早由netscape公司于1995年发布，1999年经过IETF讨论和规范后，改名为TLS。如果没有特别说明，SSL和TLS说的都是同一个协议。TLS协议位于会话层，主要有五部分：应用数据层协议，握手协议，报警协议，加密消息确认协议，心跳协议。T

原创 搜集一些网站

1、目录知识型点击打开链接2、科学网（BBS）点击打开链接

原创 SEO

百度搜索引擎优化指南点击打开链接

转载 bootstrap——简单界面2

Document div{ border: 1px solid #000; } .my-footer{ border: none; } 导航条 欢迎来到英特尔&copy 大 小 小

转载 bootstrap不同屏幕占比+列隐藏

Document div{ border: 1px solid red; } 全局CSS样式——不同屏幕下占比 响应列1 响应列2 响应列3 列隐藏问题 xs-6

转载 bootstrap——列的适用性

Document div{ border: 1px solid red; } 全局CSS样式——列适用性 xs-6 sm-6 md-6 lg-6

转载 bootstrap——简单页面1

Document div{ border: 1px solid red; } Bootstrap CSS Type 1111 2222 3333 4444 5555

转载 拖拽上传图片(可多张)

upload.html: Document a{ cursor: pointer; } .d1{ width: 80%; height: 200px; background: #ddd; } .d2{ display: none; } #d1_content{ width: 75%; height: 200px

转载 拖拽上传图片(只能上传单张)

upload.html: Document a{ cursor: pointer; } .d1{ width: 80%; height: 200px; background: #ddd; } #d1_content{ width: 75%; height: 200px; } #a_upload{ }

转载 编写自适应网页——media

Document div{ border: 1px solid blue; } 根据屏幕尺寸不同，显示不同布局样式 左侧附加导航 新闻列表 图片列表 明星列表 中部主题内容 Lorem ipsum dolor sit amet, c

转载 media媒体查询

1、根据不同的浏览设备加载不同的css Document hello world 根据不同的浏览设备加载不同的css Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis in autem, et non explicabo nisi necessitatibus iu

转载 bootstrap 按钮

Document 样式按钮 按钮1 按钮3 按钮常用样式 危险色 成功色 警告色 揭示色 基础色 按钮大小 大按钮 默认按钮 小按钮 超小按钮 块级按钮 效果图：

原创 前端图标库

bootstrap:点击打开链接几款图标库推荐：点击打开链接阿里图标库(一个很好的平台)：点击打开链接iconfont点击打开链接

转载 box-sizing

Document div{ width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box{ box-sizing: content-box; } .border-box{ box-sizing:

转载 max(min)-device-width和max(min)-width的区别

Document tinyScreen,css:body{ background: red;}smallScreen.css:body{ background: green;}当使用min-width和max-width时，css有效果。----------------------------------------------------------

转载 translate 位移

1、 Document .d1{ width: 200px; height: 200px; border: 2px dotted red; } .d1 div{ width: 200px; height: 200px; line-height: 200px; text-align: center; background:

原创 node.js 小功能

1、统计一段代码运行时间console.time('total time: ');for(let i=0;i<1000;i++){ console.log(i);}console.timeEnd('total time: ');

转载 H5——webSocket

Document webSocket客户端 连接到ws服务器 向服务器发送消息 断开连接 //WebSocket 广播+接收 //村长 vs 广播 //应用：实时股票走势图 //ws服务器 php/java/node.js //ws客户端 php/java/node.js/html5新特性 function getId(id){ return

转载 H5——webStorage

sessionStorage: Document sessionStorage["name"]="abc"; sessionStorage.setItem("age",20); 读取数据 Document var name=sessionStorage["name"]; console.log(name); var age=

转载 JS——worker

Document 按钮1 按钮2function isPrime(num){ var start=new Date().getTime(); do{ var end=new Date().getTime(); }while(end-start<3000); for(var i=2;i<num;i++){ if(num%i==0){ break;

原创 JS——数组去重

1、自己写的//去重 自己写的方法 var arr=[1,'a','k',2,'e','a','e',1,2,3]; Array.prototype.unique=function(){ //设置全1的标志数组 var arr1=new Array(this.length); for(var i=0;i<arr1.length;i++){ arr1[i]=

转载 php 文件上传(无数据库版)

html: Document php:<?php /*php有一个数组，该数据用于保存上传文件所有信息:$_FILES var_dump($_FILES); 二维数组 array(1) { ["mypic"]=> array(5) { ["name"]=> string(5) "1.JPG" ["type"]=> string(1

转载 JS——闭包

转载 css——遮罩层

Document #all_con { display: none; background-color: #000; width: 100%; height: 100%; left:0; top:0;/*FF IE7*/ filter:alpha(opacity=30);/*IE*/ opacity:0.3;/*FF*/ z-index

转载 事件绑定和普通事件

Document #d1{ width: 50px; height: 50px; background: red; margin-bottom: 20px; } #d2{ width: 50px; height: 50px; background: green; } d1.onclick=function(){

原创 css 边框透明

border: 3px solid transparent;解决hover时出现边框造成的布局抖动。

转载 轮播封装(初步简单封装)

html: Document #banner{ width: 500px; overflow: hidden; } #imgs{ position: relative; width: 3000px; } img{ width: 500px; } #ids{ position: relative; } .ids

转载 php,mysql登录(session，无加密版，js)

login.html: Document #wel{ display: none; } 欢迎： 退出 ajax.js://封装适合各种情况的简化版ajax函数function ajax({//利用解构，获取将来参数对象中每个属性值 type,//请求类型: "get"||"post"

转载 JS——拖拽封装

Document #d1{ position: fixed; top:100px; left: 100px; width: 200px; height: 200px; background: #ddd; } //http://www.zhangxinxu.com/wordpress/2010/03/javascript%E5

原创 画叉号的简单方法

原本在网上查的用span和::before以及::after去做，后来竟然发现搜狗输入法竟然有叉号，就用了下，贼好用。对号也有。

转载 canvas——贝塞尔曲线

Document canvas{ background: #ddd; } 您的浏览器版本太低，请升级！ //贝塞尔曲线 var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); ctx.beginPath(); ctx.moveTo(20,170); //

转载 canvas——rotate

Document canvas{ background: #ddd; } //canvas元素变形 var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); var img=new Image(); img.src='img/canvas.jpg'; img.

原创 php分页封装(10行代码搞定分页，优化版本1)

模板html: Document a{ cursor: pointer; color: red; } 编号 用户名 邮箱 手机号 操作 首页 上一页 下一页 尾页 //前端需要改动的地方只有下面几行代码。后端php有3个地方需要

原创 php分页封装(10行代码搞定分页)

html: Document a{ cursor: pointer; color: red; } 编号 用户名 邮箱 手机号 操作 首页 上一页 下一页 尾页 first.onclick=function(){ first

原创 canvas(柱状图)

html: Document canvas{ background: #ddd; } 统计图 您的浏览器版本太低，请升级！ //柱形图 var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); //画第一个柱形 $.get('php/1

转载 canvas(path)

Document canvas{ background: #ddd; } canvas——路径 您的浏览器版本太低，请升级！ var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); //三角形 ctx.strokeStyle="red"; ctx.begi

转载 canvas(图像)

Document canvas{ background: #ddd; } 您的浏览器版本太低，请升级！ var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); var p3=new Image(); p3.src='img/canvas.jpg'; p3.