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

style

style /stail, staɪl/ n. & v.(第三人称单数:styles;过去分词:styled;复数:styles;现在进行时:styling;过去式:styled)

用Electron创建跨平台应用(第一弹)

btn.addEventListener('click', function(e) { fs.readFile(path.join(__dirname, "index.js"), "utf-8", function(err, data) { if (err) { console.log(err); 有了 React-Native, 前端程序员有了开发跨平台app的能力! 有了Electron, 我们可以自由的读取本地的文件, 随意调用npm下的大量工具包, 当然也可以把在线h5小游戏快速移植为桌面游戏, 前端程序员,可以使用已掌握的前端技术, 分一块桌面软件的蛋糕, 真香!

用Electron创建跨平台应用(第二弹)开启多窗口

用Electron创建跨平台应用(第二弹)开启多窗口 记得以前用过一段wps, wps有一个蛋疼的设定令我至今难忘, 那就是不支持多窗口, 这意味着你无法同时查看两篇文档, 对应现实生活中的场景就是, 即使给了你一份材料做对照, 你也会抄的很慢, 因为你需要不停的切换标签, 我当时认为wps的设计者,或许是小时候老师不让撕答案, 所以每次抄答案都得翻页抄, 否则不得劲.. margin: 0;

用Electron创建跨平台应用(第三弹)开启系统通知

点击我,可以触发系统通知 const path = require('path'); // 创建通知并保存 let hhwNotication = new window.Notification(option.title, option);足食) 小结: Electron对系统通知这种常见功能封装的很好, 善用系统通知功能, 能让我们的程序更好用 用Electron创建跨平台应用是一个连载, 如果阅读本篇有困难,可以补一下前两弹的内容用Electron创建跨平台应用(第一弹)用Electron创建跨平台应用(第二弹)开启多窗口

用Electron创建跨平台应用(第四弹)检测当前是否连接互联网

用Electron创建跨平台应用(第四弹)检测当前是否连接互联网 Electron主要用于创建跨平台的桌面软件, 既然是桌面软件, 那即使是断网的情况下, 无需联网的功能也应该可以正常使用. 为了更好的交互体验, 我们也可以将 离线不可用的功能按钮,变成灰色失效的状态. Demo演示 源码: 检测在线或离线 #desc { font-size: 20px; // 创建上线通知 new window.Notification(option.title, option);

css组合选择符

very important. This is really very important. 这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响 相邻兄弟选择器 当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中 语法:前方元素 + 目标元素 {样式声明 } h1 + p {background-color:pink;

Vue2.0 Vuex初始化及歌手数据的配置

singer-detail position: fixed z-index: 100 top: 0 left: 0 right: 0 bottom: 0 background: $color-background ./actions' import * as getters from './mutation-types' const mutations = { [types.SET_SINGER](state, singer) { state.singer = singer } } export default mutations // store/mutation-types.js export const SET_SINGER = 'SET_SINGER' // store/state.js const state = { singer: {} } export default state 安装 Vuex 并在入口文件初始化 // main.js import store from '.

Vue中使用QRcode.js 生产二维码

Vue中使用QRcode.js 生产二维码 在一次开发中需要前端自己生成二维码图片,所以使用了qrcode.js 这个插件 第一步 下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcodejs2 第二步,在组件中使用 import QRCode from 'qrcodejs2' // 引入qrcode export default { name : 'test', mounted () { this.qrcode(); height: 132px; background-color: #fff;

再学一次gulp自动化构建项目(含有开发环境和生产环境之分)

/index.js');pipe(gulp.dest(config.dev));stripDebug({ debugger:true,console:true,alert:false }) 我以为结束了,兴高采烈的运行生产环境,手抖的戳,等了“半天”,没看到alert弹出来,emmm,抱自己痛哭的去看参考网址,卧槽,还要改插件的配置,这个开发者是懒得再多配置了么?好吧~ 去node_modules里找gulp-file-include/index.js,然后加options,意思是接受上面的配置 const through = require('through2');

用css写一个对话框

用css写一个对话框 要实现的对话框效果 首先分析一下对话框的组成:大致可以分两部分,左边的矩形和右边的三角形。矩形实现起来简单,那么三角形呢? 三角形的实现首先要从div说起 1.首先画一个div,给它设置宽高和背景颜色。再加上四条边的边框 Document . border-top: 50px solid pink; border-left: 30px solid ghostwhite ; border-bottom: 20px solid transparent; background-color:#cdcdcd ;

七夕心形图案漂浮

七夕心形图案漂浮 这不今天七夕嘛,虽然我没有女朋友,但是作为程序员我可以new一个啊 哈哈哈 这次实现的是鼠标点击处心形漂浮的炫酷效果,这个效果是通过juqery实现的,头部通过引入封装好的jquery。 下面直接附上代码 测试 *{ margin: 0px;//获取鼠标点击的位置坐标 $i.css({ "z-index": 9999, "top": y - 20, "left": x, "position": "absolute", "color": 'red', "font-size": 14, });

css圣杯布局和双飞翼布局(2018-08-17)

right: -220px;middle{ width: 100%; word-break: break-all;main-inner{ margin-left: 200px;HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh sub oooooooooooooo 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000 extra BBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB 88888888888888888888 footer 双飞翼效果

Vue过滤器

Vue过滤器 Vue过滤器 {{msg |msgFormat}} Vue.filter('msgFormat',function(msg){ return msg.replace(/学习/g,'讨论'); }) Vue.filter('test',function(msg){ return msg+'=====';toString().padStart(2, '0') var d = dt.getDate().padStart(2, '0') if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}` } else { var hh = dt.getHours().padStart(2, '0') var mm = dt.getMinutes().padStart(2, '0') var ss = dt.getSeconds().

粒子上升渐变特效学习

粒子上升渐变特效学习 之前在某个网站发现有个粒子缓缓上升的特效,最近想用的时候发现找不到了找不到了找不到了。求助群里的大佬们,在大佬推荐的网站上找到了一样的特效。于是把特效顺带学习了波。 特效demo如下: image 这里只取了Bubbles的特效。学习过程记录在代码注释中 css代码如下 . } /*css keyframes 动画*/ @keyframes bubbles { 0% { opacity: 0; transform: translate(0, -8000%);

爬虫——Web前端知识

爬虫——Web前端知识 W3C标准 W3school教程 W3C——万维网联盟,最具权威的技术标准机构。网页主要是由三部分组成:结构(structure)、表现(Presentation)、行为(Behavior)。 2.结构的标准语言——XHTML、XML 表现的标准语言——CSS 行为包括——ECMAScript(JS的标准) HTML 文本标记语言 content HTML文档中工作。在Python爬虫开发中,经常使用XPath查找提取网页中地信息。 …

Vue2+Webpack4的那些事

/app.vue'; webpack.config.js文件: const Path = require('path');vue$/, loader: 'vue-loader' }, { test: /\. } 上述代码中的配置项我们在webpack官网中都可以看得到,每一步的原因我已在后面加了相关注释。 引入webpack,以便之后用webpack的插件,下面会用到DefinePlugin这个插件(ps:做vue或react的项目必须用到的,这些项目都会根据环境来区分打包) const Webpack = require('webpack');

CSS常用布局

CSS常用布局 1、左右布局 1) float实现,左侧宽带固定,右侧宽度自适应 核心代码: 左侧:width:100px ;float:left; 3)对于未知宽度的块级元素 (1)table标签配合margin左右auto实现水平居中 使用table标签(或直接将块级元素设值为display:table),再通过给该标签添加左右margin为auto (2)inline-block实现水平居中方法 display:inline-block; text-align: center;box { display: flex; justify-content: center;

CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布局&双飞翼布局

CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布局 双飞翼布局 css布局考察的知识点比较综合,基本就是使用上了所有css的基础技巧,以下是一些比较常见的场景总结。 水平居中 方法一: 定宽 + margin: 0 auto 我是子元素 ./*Flex布局*/ display: -webkit-flex;child { display: table-cell;方法三: 图片宽高自适应,使用line-height,text-align,vertical-align,max-width,max-height .

前端性能优化指南

中。可以通过 Github 上的 Critical 项目确定关键 CSS。 异步加载 CSS 样式文件。通过设置 link 标签的 rel="preload" 实现异步加载 CSS。 无阻塞加载 JS 脚本。JS 脚本的加载与执行会阻塞页面渲染,我们可以通过将 JS 脚本的引入放到页面的最底部,也可以通过在 script 标签中加上 defer、async 属性来实现 JS 脚本的异步无阻塞加载。当使用 defer 时,加载文档

Vue子组件与父组件之间的通信

Vue子组件与父组件之间的通信 1.环境搭建 下载 vue-cli:npm install -g vue-cli 初始化项目:vue init webpack vue-demo 进入vue-demo文件夹:cd vue-demo 下载安装依赖:npm install 运行该项目:npm run dev 2.父组件向子组件传值 src/components/文件夹下建一个组件,Home.vue 创建子组件,在src/components/文件夹下新建一个文件夹,在新建文件夹中新建一个组件Child.vue 在Child.vue中创建props,用于接收父组件传