随笔分类 - web source
摘要：一、分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能： Network : 页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2/quic...)、资源类型、资源大小、资源时间线等情况 Performance : 页面各项性能指标的火焰图，这里能
阅读全文
摘要：webstorm设置 settings >> TypeScript >> TSLint, 勾选 Enable ,选取 tslint包路径...npm\node_modules\tslint，这里webstorm基本会自动读取 配置tslint.json
阅读全文
摘要：OAuth 2.0 的标准是 RFC 6749 文件。该文件先解释了 OAuth 是什么。 这段话的意思就是，OAuth 的核心就是向第三方应用颁发令牌。然后，RFC 6749 接着写道： 也就是说，OAuth 2.0 规定了四种获得令牌的流程。你可以选择最适合自己的那一种，向第三方应用颁发令牌。下
阅读全文
摘要：一、应用场景 有一个"云冲印"的网站，可以将用户储存在Google的照片，冲印出来。用户为了使用该服务，必须让"云冲印"读取自己储存在Google上的照片。 问题是只有得到用户的授权，Google才会同意"云冲印"读取这些照片。那么，"云冲印"怎样获得用户的授权呢？ 传统方法是，用户将自己的Goog
阅读全文
摘要：const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.e...
阅读全文
摘要：要让webpack知道这就是我们的index.html入口文件，并且我们不需要手动引入打包后的js文件，需要安装html-webpack-plugin npm install html-webpack-plugin --save-dev react里面的JSX语法普通浏览器可解析不了，需要安装bab
阅读全文
摘要：@if @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。 假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，
阅读全文
摘要：CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目
阅读全文
摘要：文件后缀名 sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号 导入 sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS
阅读全文
摘要：一、搭建开发环境 cnpm i -g bower 创建git仓库 cd webapp dir git init 创建.bowerrc类文件技巧 null>.bowerrc css预编译处理：less 常用语法： 定义变量 后代选择器 文件引用 函数 lesscss.cn 在线编译工具 tool.os
阅读全文
摘要：网页布局（layout） 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 6个属性设置在容器上 flex-direction flex-wrap flex-flow justify-
阅读全文
摘要：1、使用outline属性在元素周围画一条线。 2、设置轮廓的宽度 3、设置表格的布局 4、是否显示表格中的空单元。（请在非 IE 浏览器中浏览） 5、合并表格边框，是否把表格边框显示为一条单独的边框，还是像标准的 HTML 中那样分开显示 6、设置单元格边框之间的距离。（请在非 IE 浏览器中浏览
阅读全文
摘要：1、用简写属性来将所有四个边框属性设置于同一声明中 2、设置四边框样式 3、用简写属性来将所有边框宽度属性设置于同一声明中 4、设置四个边框的颜色。可以设置一到四个颜色 5、用简写属性来将所有下边框属性设置在同一声明中 6、设置下边框
阅读全文
摘要：1、相对定位，相对于一个元素的正常位置来对其定位 2、使用绝对值来对元素进行定位 通过绝对定位，元素可以放置到页面上的任何位置。下面距离页面左侧 100px，距离页面顶部 150px。 3、固定定位 相对于浏览器窗口来对元素进行定位 4、设置元素的形状。此元素被剪裁到这个形状内，并显示出来 5、当元
阅读全文
摘要：1、设置文本字体 2、设置字体尺寸 3、设置字体风格 4、设置字体的异体 5、设置字体的粗细 使用简写属性将字体属性设置在一个声明之内
阅读全文
摘要：1、设置文本的颜色 2、增加或减少字符间距 3、使用百分比值来设置段落中的行间距。 4、对齐文本 5、向文本添加修饰 6、缩进文本首行 注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如
阅读全文
摘要：1、设置背景颜色 2、将图像设置为背景 3、重复背景图像 3、在页面上放置背景图像 您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 4、使用百分比来在页面上定位背景图像 为了在 Mozilla 中实现此
阅读全文
