- 博客(49)
- 收藏
- 关注
RSS订阅原创 关于当前safari对于calc()的样式兼容问题
遇到一个情况，就是一个输入框，原本是left: calc(50% - XXXpx)居中，hover时变成left: calc(50% - YYYpx)，给了个transition，但是在safari浏览器下频繁hover的时候，样式不是平滑的变化。后用以下方案解决问题：.XXX { left: 50%; transform: translateX(-50%);}问题可能是safari在calc()计算时逻辑导致，直接用transform来进行位移可以解决...
2021-02-03 11:14:12
1237
原创 webpack打包工具的安装、使用及其基本设置
安装在使用webpack前，得确保安装了node.js，并且最好是最新的长期支持版本。安装webpack可选择本地或者全局安装，官方文档中建议使用本地安装：这样可以在引入突破式变更(breaking change)版本时，更容易分别升级项目。npm install --save-dev webpack //本地安装npm install --global webpack //全局安装另...
2019-11-28 11:18:26
279
原创 如何直接访问GitHub上的项目
打开项目对应的html文件的地址，如：https://github.com/Logonther/vue-cms/blob/master/src/index.html在刚才的地址前加上htmlpreview.github.io/?，这样输入htmlpreview.github.io/?https://github.com/Logonther/vue-cms/blob/master/src/ind...
2018-10-25 17:04:33
1749
转载 Git忽略规则
Git 忽略规则优先级在 .gitingore 文件中，每一行指定一个忽略规则，Git 检查忽略规则的时候有多个来源，它的优先级如下（由高到低）：从命令行中读取可用的忽略规则当前目录定义的规则父级目录定义的规则，依次递推$GIT_DIR/info/exclude 文件中定义的规则core.excludesfile中定义的全局规则Git 忽略规则匹配语法在 .gitignore ...
2018-10-24 09:43:11
229
转载 有关移动端的兼容
移动端 经常出现的兼容问题安卓浏览器看背景图片，有些设备会模糊因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况下都是2倍的），或者指定background-size:contain;都可以防止手机中页面放大和缩小<...
2018-10-23 08:59:07
377
原创 在 vue 中使用 vue-router
导入 vue-router 组件类库： <script src="./lib/vue-router-2.7.0.js"></script>使用 router-link 组件来导航 <router-link to="/login">登录</router-link> <router-link to="/
2018-10-22 09:38:49
107
转载 安装npm及cnpm(Windows)
工具官网Node.js : http://nodejs.cn/淘宝NPM: https://npm.taobao.org/安装步骤一、安装node.js1.前往node.js官网下载并安装工具，这里安装路径选到D盘，D:\Program Files\nodejs安装完毕在命令行输入以下命令测试是否安装成功，正确会出现版本号npm -v2.改变原有的环境变量，(1)我们要先配置n...
2018-10-19 11:14:35
289
原创 减少页面加载时间的方法
1.优化图片2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）3.优化CSS（压缩合并css，如margin-top,margin-left…)4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器...
2018-10-18 10:34:38
103
原创 关于js中节点的操作
节点的有关操作1、创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2、添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() /...
2018-10-16 19:12:20
206
原创 关于闭包
包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。使用闭包的注意点：由于闭包会使得函数中的...
2018-10-15 18:37:31
176
原创 css的选择器以及优先级
一、选择器类型ID #idclass .class标签 p通用 *属性 [type=“text”]伪类 ：hover伪元素 ::first-line子选择器、相邻选择器二、优先级计算规则第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.cont...
2018-10-15 09:23:34
151
原创 vue的生命周期
这张图即是官方文档中的vue的生命周期，大致上可以这么描述：创建一个vue实例对象初始化空的实例对象初始化data和methods中的方法开始编辑模板，在最后将模板放到内存中将编辑好的模板渲染到页面数据的更新，dom的调用最后的销毁其中各钩子函数：beforeCreate：初始化了一个空的实例对象，此时只有默认的函数和事件，其他东西还没创建created：data和me...
2018-10-12 09:21:21
90
原创 v-bind的用法
vue部分： var vm = new Vue({ el:'#app', data:{ img:'img/1.png', isTrue:true, }, })绑定一个属性：<img v-bind:src="img" alt="">可简写：<img :src=...
2018-10-11 10:11:16
1664
原创 vue中有关v-for和key的细节
渲染数据时我们可能会用到v-for来遍历数据，但是key的话有时候是可加可不加，实际上为了规范还是加上比较好，因为可能会遇到如下例子中的问题：html代码：<div id="app"> id:<input type="text" v-model="id"> name:<input type="text" v-model="name
2018-10-10 09:17:10
467
原创 关于es6中的函数写法
1、函数参数的默认值函数的参数支持默认值，如果有多个值，要传参时，只能省略最后一个function str(x=10,y=20) { console.log(x, y);}；str(100);如果非要传y，可采用对象的形式来写 function str({x,y=20}) { console.log(x, y); } //str({...
2018-10-08 18:28:08
6978
1
转载 less的语法
1、注释/* 此注释方法会编译 */// 此注释方法不会被编译2、变量声明语法：@变量名:值;，如：@box_len:300px;// 定义变量@boxLen : 160px;@bgColor: #000;// 使用变量.box { width: @boxLen; height: @boxLen; background: @bg...
2018-10-07 10:15:48
364
转载 将ECharts官方示例库下载到本地运行并下载完整示例源代码
今天来介绍一下如何将ECharts官方示例库下载到本地运行并下载完整示例源代码。在ECharts官网点击右上角的：作品 -> 官方示例如图：能看到ECharts的所有官方示例，非常丰富：随便进一个看看：这里左侧是代码，有测试显示效果。但要注意，左侧的代码不是完整版的，这里也无法将完整的代码下载下来。如果要获取完整版的js代码，需要下载ECharts官方示例库到本地。点击E...
2018-09-29 19:29:28
8654
原创 从mui上扒代码
对于前端人员而言mui应该是必不可少的框架之一，需要时会从文档里面找到一些需要的功能的说明，进而加以使用，不过内容都需要自己编辑，这里有个小技巧。在首页上，可以看到有个“手机”给我们展示所有的组件的例子，右上角有个如图所示的地方，点进去：这个时候地址栏应该显示的是http://www.dcloud.io/hellomui/examples/info.html把hellomui后面的内容去掉...
2018-09-28 23:42:47
274
转载 用tab快速生成标签
生成 HTML 文档初始结构HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（当然是英文符号），然后摁下 TAB 键，就会发现生成了下面的结构：<!doctype html><html lang="en">&l...
2018-09-27 19:15:27
4424
1
原创 关于localstorage的使用
平常可能会用localstorage存储东西，如果是存数组的话，在之后需要删除数据就一定要两边都删除。比方说，如果不删除数组中的东西，那么点击删除的按钮的话，确实会删除，但是不刷新的话实际上数组还在，如果再加载一遍数据，还是会把东西加载出来...
2018-09-26 22:32:15
204
转载 WebStorm按Tab建快速生成代码模块
WS中，比如调试每次都要写的console.log(xxx);每次都要敲一遍，还有if模块，for循环模块，难道没有快捷键，可以生成代码模块吗，答案是“有”。操作步骤如下（汉化版WS）：1、Alt + F7打开设置页面；2、找到如下模板，点击右边的“+”号添加Live Template设置关键字和代码，选择底下的Define选择JavaScript点击确定，即可；如图：3、在代码中输入...
2018-09-25 19:43:59
2357
原创 em与rem
rem是相对单位em是基于父元素的字体大小浏览器默认字体是16px，默认行高21pxrem基于根元素，即html标签例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&am
2018-09-20 17:50:36
123
原创 bootstrap使用时的小技巧
bootstrap给我们提供了大量的方便的样式，但是往往我们需要的效果和提供的默认样式不同，比方说默认的一个按钮是方的，我们需要用的则是圆的。这时候就需要我们单独覆盖样式，有个简单的方法就是ctrl+鼠标左键点击对应的类，这样会跳转到bootstrap提供的样式文件中，我们可以把对应的一部分代码直接拷贝过来直接修改。需要注意的是这样改的话得在样式前面加上父元素，以免影响其他地方的对应的样式。具...
2018-09-19 18:55:52
631
原创 bootstrap中的模态框
<button class="btn btn-primary" data-toggle="modal" data-target=".modal">登录</button> <div class="modal-dialog modal-sm"> <div class="modal-content&q
2018-09-18 20:10:26
201
原创 响应式布局
响应式布局：就是一个网站能够兼容多个终端优点：面对不同分辨率的设备灵活性非常强能够快捷解决多设备显示的适应问题缺点：只适合中小型网站兼容各种设备工作量大，效率低下原理：通过媒体查询来定制某个宽度空间的网页布局媒体查询：它能够检测我们设备的宽度，通过不同的宽度显示不同的样式超小屏幕（移动设备）：768px以下小屏屏幕（平板设备）：768px-992px中屏屏幕（标屏电脑...
2018-09-17 18:32:50
80
原创 touch事件
js中除了日常用的click、keydown等等事件类型外还有一种针对移动端的touch事件，即触摸事件，而且算是同一组事件。touchstart 当手指触摸屏幕的时候触发touchmove 当手指在屏幕来回滑动的时候触发touchmove 当手指离开屏幕的时候触发touchcancel 当被迫终止滑动的时候触发（来电、弹消息等）使用touch事件box.addEventL...
2018-09-13 19:12:12
128
原创 盒子水平垂直居中的4种方法
不确定宽度：第一种 div{ padding: 30px; background: orange; font-size: 30px; position: absolute; top: 50%; left: 50%; ...
2018-09-12 19:11:50
393
原创 canvas——绘制图片
canvas作为画布也能将图片画出来，语法如下：drawImage() 三个参数drawImage(img,x,y)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角五个参数drawImage(img,x,y,w,h)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角w,h 图片绘制尺寸设置(图片缩放，不是截取)九个参数draw...
2018-09-11 18:09:49
601
原创 有关EChars
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。其主页为：http://echarts.baidu.com/index.html在其网站上的...
2018-09-10 17:21:21
107
原创 Font Awesome 字体的以及 图标的使用总结
首先说一下中文网站的路径：http://www.fontawesome.com.cn/faicons/下载了新版本后，将font、css文件夹放到项目目录下 打开css文件，将@font-face中的路径修改为正确的路径 在html文档中的head部分，引入css 文件 具体使用图标的时候，几乎可以用在任何地方，只需要使用CSS前缀fa，再加上图标名称。 如：<a href="j...
2018-09-09 13:27:09
506
原创 canvas中将y轴方向反转的一种方法（有弊端）
先将原点移动到左下context.translate(0, canvas.height);然后，利用坐标缩放，缩放y轴倍数为-1，这样子y轴就会“缩回去”，从而达到反转y轴的效果，如下：context.scale(1, -1);但是这样如果是画文本，就会颠倒，如果是画坐标图、折线图什么的，用这样子的方法，就很好画，也就很好想了。...
2018-09-06 17:39:37
3571
转载 h5有关本地存储
本地存储随着互联网的快速发展，基于网页的应用越来越普遍， 同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据， HTML5规范提出了相关解决方案。特性 设置、读取方便容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储window.sessionStorag...
2018-09-05 18:40:05
158
原创 通过input获取文件的路径的问题
input标签的type为file时，可以获取文件，但是获取的路径却会被现在的浏览器保护起来，变成了一个假路径。我本想通过这个来改变video标签的src实现播放器，但是目前网上的方法都不管用。有待解决...
2018-09-04 20:43:43
7003
转载 html中fieldset边框样式设置
fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。在 Internet Explorer 4.0 及以上版本的HTML 和的脚本中可用。 fieldset元素元素是块元素。 并且需要关闭标签，即必须成对出现。form#staff_info fieldset { background: rgba(255,255,255,.3); ...
2018-09-03 18:20:00
16225
原创 有关一些webstorm的小技巧
快速创建div标签： 可以先打出要创建的div标签的类选择器或者id选择器，比方说.box1、#box2，然后按tab，就可以直接创建对应的标签。另外可以利用创建多个简单的标签，比方说li$∗4，可以很快创建如下标签：也可以不加创建多个简单的标签，比方说li$∗4，可以很快创建如下标签：也可以不加创建多个简单的标签，比方说li{$}*4，可以很快创建如下标签： 也可以不加直接创建多个相同...
2018-09-01 23:13:32
255
原创 css3中的旋转有个需要注意的点
一般来说，如果要将元素居中，可能会采取以下方式：.box{ width:300px; height:300px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px;}如果，要旋转的是个正方体，用这样的方式把第一个面固定在中间， ...
2018-08-30 19:17:28
1155
原创 有关于css3的2d转换
css3中的2d转换在transform中写的东西是存在顺序关系的，比方说要把几张图片竖起来排成蜂窝状，就得先将图片旋转需要的角度，然后再在z轴上移动，否则反过来的话，就会变成整体先移动，然后再一个旋转需要的角度。 比方说下面所展示的部分的代码： img:nth-child(1){ transform: translateZ(260px); ...
2018-08-29 18:58:52
183
原创 jQuery中的keydown事件
jQuery中有个keydown事件，先附上keydown的说明： keydown([[data],fn])data：可传入data供函数fn处理。fn：在每一个匹配元素的keydown事件中绑定的处理函数。附一小段例子：$(window).keydown(function (e) { console.log(e.keyCode); switch(...
2018-08-28 19:57:57
2273
1
原创 初步接触Ajax
在jq里用ajax的方式请求：$.ajax({ url:’请求的地址’, type:’请求的类型’, data:’要发到服务器的数据’, datatype:’服务器返回来的数据类型’,//html,json async:请求是否异步处理 默认就是true succ...
2018-08-27 19:15:35
123
原创 分享今天封装的一个简单的jq方法-手风琴
嘛，还是先上代码：js文件：$.fn.accordion = function (width) { var $li = this.find('li'); $li.each(function (index,ele) { $(ele).css('background','url("images/'+(index+1)+'.jpg")'); }) ...
2018-08-23 18:07:49
315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人