大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

Web Optimize 网页优化

Web Optimize 网页优化 1、减少HTTP请求 1-利用图片地图 2-CSS Sprites(利用background-position) 3-内联图片(通过将小数据量的图片存放在url中来减少http请求,格式data:[mediatype][;

CSS calc() 函数

CSS calc() 函数 css样式 #div1 { position: absolute; left: 50px; width: calc(100% - 100px); min-height:calc(100vh-200px);

Vue-cli 工具快速构建Vue框架

) //作者 Runtime + Compiler: recommended for most users //运行加编译 Install vue-router? (Y/n) //是否安装vue-router Use ESLint to lint your code? 3、进入项目文件夹,安装所需依赖 cd Project-Name //进入项目 npm install //安装依赖 4、运行、发布已安装好的项目 npm run dev //开发脚本 npm run build //发布脚本 运行后的效果图: 持续更新中(欢迎评论指正).

巴基斯坦潜在的生意机会

巴基斯坦潜在的生意机会 GARVAISH HOTEL 上周,陪同考察团去了一趟费萨拉巴德,它是巴基斯坦第三大城市,也是纺织工业的中心。不过相比卡拉奇、拉合尔,这里的中国人很少。 我们中午抵达市区后,直接前往一家名叫「南华」的中餐馆,第一代开拓者80年代就来到这里开始创业,现在的餐馆在当地也是颇具规模与名气。 中国人在海外做餐饮是一种最常见的生意,只要在当地

双轨迹旋转Chart

point = _twaver.math.calculatePointInfoAlongLine(paths, true, offset - (count - i) * tailFactor, 0). ctx.shadowColor = shadowColor; ctx.fillStyle = fillColor; 点击查看效果 使用globalCompositeOperation方法 var canvas = this.canvas, g = this.g, gradient = this.gradient, gradient2 = this.gradient2, diameter = Math.floor(data.getWidth() * view.getZoom()), radius = diameter / 2, hueStart = 120, hueEnd = 170, hueDiff = Math.abs(hueEnd - hueStart), width = diameter, height = diameter;

2018年3月前端必须star的github项目

(image-5cd51d-1522635408154)] oni -- 现代的模态编辑器Oni是一种新型的编辑器,专注于最大限度地提高生产力 - 将模态编辑与现代编辑期望的功能相结合。 demo is-thirteen -- 检查一个数字是否等于13。本来以为是个很没有用的库(其实还是没啥用),可以看看代码,非常有意思 text2mindmap -- 通过编写缩进列表来制作思维导图的在线工具

https权威指南读书笔记

为了更好的安全性,你可以在每两个人之间使用不同的密钥,但是这个方法不可扩展 (1+n)*n/2 非对称加密(asymmetric encryption)又称为公钥加密(public key cryptography): 公钥公开, 私钥自己保管; 私钥加密公钥解密 - 数字签名 RSA是目前最普遍部署的非对称加密算法, 现在推荐的RSA强度是2048位,强度等同于112位的对称密钥;

Promise/A+ 规范的实现

then((data)= { console.log(data) },(reason)= { console.log(reason) }) 现在用setTimeout包裹resolve,结果就是什么输出也没有 同步的话,resolve先执行,onFulfilled后执行,此时状态已经变成了fulfilled 异步的话,then先执行,此时status还是pending,无法进入fulfilled状态,所以onFulfilled不会执行,setTimeout之后resolve改变status,但已经找不到onFulfilled了 then没有容错 new Promise((resolve,reject)= { resolve(2) }).

JS事件截流 / 防抖

JS事件截流 / 防抖 JS事件截流 在使用scroll,resize,mousemove等方法的时候,由于触发次数过于频繁,一般会使用一个节流的方法来实现方法的调用 //首先定义一个全局函数 let timeOutId = null; //定义一个延时定制器的回掉函数 function callBack(){ const top = warpper.getBoundingClientRect(). } //回调函数延迟50毫秒触发 timeOutId = setTimeout(callBack,50); },false);

【CSS】渐变背景(background-image)

【CSS】渐变背景(background-image) 微信订阅号:Rabbit_svip 以前,我们要实现这种渐变,可能要用 Photoshop 或 Fireworks 创建一个渐变图形,然后使用 background-image 属性把渐变图形放在元素的背景中。 现在,CSS支持渐变背景,可以理解为Web浏览器即时创建的图像。所以,渐变也使用常规的 background-image 属性创建 微信订阅号:Rabbit_svip 线性渐变 background-image: linear-gradient( 角度 , 颜色);

【CSS】同时使用多个背景图

【CSS】同时使用多个背景图 0003.jpg image.png 上面这张图是由3个小图片组合而成的。 在使用多个背景图时,只需把 background-image 属性的值用逗号隔开,列出想用的图像,然后用 background-repeat 定义重复属性,最后用 background-position 定义每张小图的位置。 HTML代码: CSS代码: background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg);

【CSS】背景基础知识

【CSS】背景基础知识 92038-106.jpg 添加背景图 用 background-image 属性,在元素的背景中添加图形。 background-image属性有一个值:url,后面跟着放在括号里的图形文件路径。 路劲可以是绝对url,也可以是相对url。 在使用相对url时,如: url(.div1 { width: 900px; height: 500px; repeat-x 沿着X轴横向平铺图像 image.png background-image: url(images/quan.png);

【CSS】带边框的三角形

【CSS】带边框的三角形 34840-106.jpg image.png 思路是将2个三角形叠加起来,外层的三角形稍微大一些。 思路和《【CSS】内圆角》这个笔记的 “方法一” 类似。http://www.jianshu.com/p/6e61856cf143 这个笔记最后会补充《【CSS】画三角形》这个笔记里记漏的一点。http://www.jianshu.com/p/2c04549a8aae HTML代码: CSS代码: . left: -90px; 对应:上下 左右 如果只设置三个值,如:border-width: 1px 2px 3px;

【CSS】画三角形

【CSS】画三角形 270924-106.jpg 用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。 image.png HTML代码: CSS代码: div { width: 0; border-top: 70px solid red; border-top: 50px solid transparent; height: 100px; background: #15A892; border-top: 20px solid #1574A8; border-right: 20px solid #E94E65; border-bottom: 20px solid #E9D24E; border-left: 20px solid #A81574;

【CSS】内圆角

【CSS】内圆角 184250-106.jpg 先上个图看看效果 image.png 紫色边框外面是直角,内部是圆角。要做出这个效果,首先要知道box-shadow 和 outline 的使用方法。box-shadow 和 outline 的使用方法在我的简书《CSS多重边框》里面有记录。http://www.jianshu.com/p/a6333147dff5 我做出这种效果有2个方法。 方法一: 用2个div嵌套实现。 HTML代码: CSS代码: . height: 300px;div { width: 280px; border-radius: 20px;

【CSS】多重边框

【CSS】多重边框 90507-106.jpg 要设置多重边框,最要用到的是box-shadow这个样式。 box-shadow 的作用是添加投影。 div { width: 300px; height: 300px; margin: 100px auto; border: 10px solid #036;好以上参数就行。box-shadow: 5px 5px 10px #888; } image.png 如果需要设置多重边框,可以用逗号分隔语法,这样就可以创建任意数量的投影了。box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf; outline-offset: -16px;

【HTML】网站LOGO

【HTML】网站LOGO 70043-106.jpg LOGO是网站的一个标志,能体现网站的形象和宗旨。 image image 给网站添加LOGO方法有很多,例如可以直接在站点的根目录下放入“favicon.ico”的图标文件。 我常用的方法是通过 元素,链接到一个ico文件。 rel的作用是定义当前文档

【CSS】着色与透明

【CSS】着色与透明 0002.jpg 着色 方法一:十六进制 如:#3E8988 、 #6600FF等等 其中,如果两两相同,可以简写 如:#6600FF 可以简写成 #60F 方法二:RGB(Red,Green,Blue) 这种颜色值由3个数组成,每个数各代表一种色相(红、绿、蓝),每个值可以使用百分百(00%)表示,也可以使用0255之间的数字表示。 如果想设置白色,可以使用: rgb(100%, 100%, 100%); opacity: 0.5; color: blue;