- 博客(30)
- 收藏
- 关注
RSS订阅
原创 Centos部署node网站
1.安装wgetyum install wget2.安装nodejswget urlwget https://npm.taobao.org/mirrors/node/v10.15.0/node-v10.15.0-linux-x64.tar.xz解压文件： xz -d / tar -xfxz -d node-v10.15.0.linux-x64.tar.xztar -xf...
2019-06-08 09:56:59
392
原创 7.webpack开启本地服务器
1. webpack-dev-server（1）webpack-dev-server：开启本地服务器，并自动监听工程文件(不包括配置文件)，自动刷新浏览器（2）全局/局部安装npm install webpack-dev-server -g npm install webpack-dev-server --save-dev devServer: { ...
2019-12-23 11:36:47
429
原创 6.webpack图片处理
url-loader：可以替代file-loader，打包图片文件img-loader：压缩图片html-loader：使html文件中引入的图片得到处理const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const {CleanWebpackPlugin} =...
2019-12-23 11:32:02
167
原创 5.提取公共js代码
针对多入口js文件，当引入多个相同的自定义模块或者第三方库的时候，提取公共的js代码，减少代码冗余，提高页面加载速度module.exports = { entry: { index: './src/index.js', pageC: './src/pageC.js' }, output: { path: path.re...
2019-12-23 11:28:50
1129
原创 4.webpack处理html
html-webpack-plugin：打包压缩html，并自动引入本次打包的js、css文件等clean-webpack-plugin：只保存本次打包的结果安装cnpm install html-webpack-plugin clean-webpack-plugin -Dconst MiniCssExtractPlugin = require('mini-css-extract-...
2019-12-23 11:25:06
185
原创 3.postcss
postcss: postcss 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。postcss-loader：使用postcss在webpack处理css的加载器autoprefixer：postcss的插件，用于解析css和增加前缀cssnano：postcss的插件，压缩css代码postc...
2019-12-23 11:21:20
125
原创 2. css tree shaking
1.打包压缩css文件css-loader: 加载解析文件，如遇到@import会将相应的样式文件引入（如没有css-loader则不会引入该文件）style-loader：将解析的css放style标签，插入head标签里(css样式打包到main.js文件里)实例：/* demo.css*/body{ background: #ccc;}div{ ...
2019-12-23 11:15:46
482
原创 1.js tree shaking
1.在js中有引入自定义的模块和第三方库的情况当引入自定义的模块但没有使用其中某些方法时，webpack --mode development会将没有使用到的一起打包，但生产环境下webpack会将其没有使用到的方法剔除掉 当仅引入第三方库，没有使用其中任何方法时，情况同上 当在自定义的方法中使用了第三方库的方法，而却没有调用该自定义方法时，在生产环境下也会第三方库也会被打包注：在自定义...
2019-12-23 11:01:14
271
原创 webpack导图
1.内容导图2.内容链接（1）js tree shaking（2）css tree shaking（3）postcss（4）webpack处理html（5）提取公共js代码（6）webpack图片处理（7）webpack开启本地服务器...
2019-12-23 10:53:09
160
原创 函数：js设置或获取transform相关属性
问题：transfrom的获取：使用dom.style.transform只能获取行间设置的transform 使用window.getComputedStyle(dom).transform获取matrix3d()封装函数： const myTransform = (ele, attr) => { // ele: dom元素, attr: ...
2019-12-07 17:40:45
2903
原创 补充元素
补充元素abbr缩写词 <abbr title="cascading style sheet">css</abbr>time提供给浏览器或搜索引擎阅读的时间 <time datetime="2019-9-21">今年九月</time> b以前是一个无语义，主要用于加粗字体，h5提倡语义化，现表示区分q表示一小...
2019-09-20 20:14:39
150
原创 美化表单
美化表单新的伪类:focus：元素聚焦所有元素都有聚焦，可通过元素的tabindex属性的大小，设置tab键元素聚焦时的顺序 .box:focus{ outline: none; outline-offset: 0; }:checked：表示单选框或多选框被选中的样式（很少样式可设置） input:checked + label{ color: #ccc; }...
2019-09-20 19:15:13
188
原创 表单
表单元素一系列元素，用于收集用户数据input输入框type：输入框的类型（1） text：普通文本框（2）password：密码框（3）date：日期选择框，有兼容性问题（4）checkbox：多选框， name属性表含义，value表值，checked默认选中（5） radio：单选框， name属性表含义，value表值，checked默认选中（6）file：选择文件...
2019-09-20 15:30:59
108
原创 iframe 和 flash
iframe元素作用：在页面中嵌入另外一个页面可替换元素：通常是行盒通常显示的内容取决于元素的属性css不能完全控制其中的样式（如图片的颜色，或者引入页面的样式）具有行块盒的特点src属性：网页地址(如视频网站嵌入代码)<a href="www.baidu.com" target="myframe"><a href="www.taobao.com" targ...
2019-09-20 13:27:40
435
原创 补充css样式
透明度opacity：整个元素（盒子）的透明度，取值0~1.box{ opacity: 0.5;}在颜色位置设置alpha通道（rgba）.box{ color: rgba(0, 0, 0, 0.5);}鼠标样式属性：cursor若设置为图片，则图片格式需为.ico或.curdiv{ cursor: pointer; }div{ cursor: url...
2019-09-17 22:01:45
83
原创 定位
定位定位：手动控制元素在包含块的精准位置涉及属性：positionposition默认值： static，静态定位（不定位）relative ： 相对定位absolute ： 绝对定位fixed：固定定位定位元素（position不为static）会脱离文档流（相对定位除外）脱离文档流特点：文档流中的元素摆放时，会忽略脱离了文档流的元素文档流中元素计算自动高度时，会忽略...
2019-09-17 16:00:56
72
原创 浮动
浮动应用场景文字环绕横向排列（兼容性好）（行块盒有空白折叠）浮动的基本特点修改float属性值为left：元素靠上靠左排列right：元素靠上靠右排列none：默认值当一个元素浮动后，一定是块盒（display: block）浮动元素的包含块和常规流一样，为父元素的内容盒盒子尺寸宽度为auto时（常规流吸收），浮动适应内容宽度高度为auto时，与常规流一致...
2019-09-17 15:06:08
111
原创 常规流布局
视觉格式化模型盒模型：规定单个盒子的规则视觉格式化模型（布局规则）：页面中的多个盒子排列规则视觉格式化模型大体上将页面中盒子的排列分为三种常规流浮动定位1. 常规流布局又称为：常规流、文档流。普通文档流、常规文档流所有元素，默认情况下，都属于常规流布局总体规则：块盒独占一行，行盒水平依次排列包含块（containing block)：每个盒子都有它的包含块，包...
2019-09-17 14:18:51
316
原创 盒模型
盒模型每一个元素在页面中都会生成一个矩形区域（盒子）盒子类型：行盒：display为inline的元素（不换行）块盒：display为block的元素（独占一行）display默认值为inline浏览器默认样式表设为块盒：容器元素（div，header…）,h1 ~ h6, p常见行盒：span, a, img, video, audio盒子的组成部分组成部分：content...
2019-09-16 21:08:15
117
原创 nodejs如何从http升级到https（阿里云）
本次以nodejs项目为例，在阿里云实现http升级到https1.证书申请一般的证书签发机构是收费的，但是像阿里云、腾讯云等有免费的证书签发步骤如下：（1）登录阿里云，选择产品和服务（2）找到SSL证书（应用安全）（3）购买免费证书（4）下载证书（选择Nginx）（5）将以.pem为后缀名的证书更改为.crt2.配置node引入h...
2019-09-05 20:05:06
1554
原创 nodemailer实现邮件发送功能
在nodejs项目中，遇到要向某一个邮箱发送邮件时可使用nodemailer，可支持QQ，163，126，Yahoo等等1.安装并引入nodemailer//安装nodemailernpm install nodemailer --save//引入const nodemailer = require('nodemailer');2.配置邮箱 var transport...
2019-09-05 18:52:59
741
原创 如何提高git clone的速度
问题：在阿里云购买云服务器，每次从github git clone代码时候5~10kb/s，如何去改善这样子的状况解决方案：http://tool.chinaz.com/dns查询github.global.ssl.fastly.net github.com 的ip地址1. 进入etc的hosts文件，加上151.101.72.249 github.gl...
2019-09-04 21:35:28
912
原创 从属性值的计算过程解释a标签为什么不能继承父元素color属性
文章目录属性值的计算过程层叠（权重计算）（1）比较重要性（2）比较特殊性（3）比较源次序应用继承解释为什么a标签的color属性不能继承父元素color属性值属性值的计算过程渲染页面：渲染页面时是一个元素一个元素依次渲染的，按照页面文档的树形目录结构顺序（先序遍历）进行渲染如何渲染元素前提条件：该元素所有的css属性必须全部有值css属性值计算过程：一个元素从所有属性都没值，到所...
2019-08-21 11:15:29
1537
1
原创 css基础笔记
文章目录css样式1. 术语选择器声明块2. css代码位置3. 常见样式声明4. 选择器简单选择器选择器组合选择器的并列5. 层叠（1）比较重要性（2） 比较特殊性（3） 比较源次性应用css样式1. 术语css规则 = 选择器 + 声明块选择器选择器：选中元素元素选择器 p {}id选择器 #wrapper {}类选择器 .box {}声明块声明块：包含很多声明（属...
2019-08-19 20:01:01
65
原创 markdown语法总结
MarkDown语法总结文章目录MarkDown语法总结1.标题2. 段落3. 强调4. 列表5. 链接6. 图片7. 引用8. 代码9. 分割线10. html代码11. 表格12. GFM1.标题# 标题一## 标题二### 标题三#### 标题四##### 标题五 ###### 标题六标题一===标题二---2. 段落不加任何修饰符号即为一个段落。3. 强...
2019-08-18 16:46:14
93
原创 数据类型及转换
1.数据类型（1）原始值：number、string、boolean、undefined、null、symbol（2）引用值：object（3）区别：原始值和引用值的存储方式不同，原始值在栈内存里放的是值，而引用值放的是堆地址，所以当将一个引用值赋值给一个变量时，拷贝的也是堆的地址，指向同一个地址，改变的时同一个引用值2.typeof返回字符串，表示传入值的数据类型不同数据...
2019-06-19 21:13:13
121
原创 事件处理模型
1.事件处理模型（1）事件冒泡结构上嵌套的元素，会存在事件冒泡功能，也就是说，同一事件，子元素会向父元素冒泡 无论哪种绑定方法都存在事件冒泡 var wrapper = document.getElementsByClassName('wrapper')[0]; var content = document.getElementsByClassName('content...
2019-06-19 15:27:29
776
原创 DOM事件笔记整理
1.绑定事件的方法（1）ele.onxxx = function(event){}兼容性很好，但是一个元素的一个事件类型只能绑定一个处理函数 基本等同于写在HTML行间上 var wrapper = document.getElementsByClassName("wrapper")[0]; wrapper.onclick = function(){ c...
2019-06-19 14:48:58
133
原创 flex弹性布局使用
flex弹性布局1.什么是flex布局Flexible Box，弹性布局，是2009年W3C提出的新的一种布局方案，可以简便、完整、响应式地实现各种页面布局。2.flex布局相关属性弹性盒子，必须配合父元素display: flex使用，父元素称为容器，子元素则称为项目。3.项目（子元素）上的六个属性（1）flex-grow：放大比例，根据所设置的比例分配盒子所剩...
2019-06-18 21:47:19
332
原创 forever后台运行node项目
问题：在腾讯云上部署node项目后，可以直接node xxx.js来执行项目，但是当服务器断开连接或者关掉终端后项目也会停止运行。解决方案：安装forever包，让项目后台执行1.安装forevernpm install -g forever2.创建软链接ln -s /root/node-v6.9.5-linux-x64/lib/node_modules/forev...
2019-06-08 10:18:18
681
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人