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

style

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

H5新特性:webWorker、webStorage、webScorket

操作复杂 (2)Flash存储:依赖于Flash播放器 (3) WebStorage:不能超过8MB,操作简单 (4)IndexedDB:可存储大量数据,还不是标准技术 今天我们就只说说webStorage , 它为用户提供两个对象以及它们的属性存储数据 1.sessionStorage 类数据对象,会话级数据存储,当会话结束,存储的数据将会消失 sessionStorage[key] = value; document.body.className = style;localStorage2 html: . var btn1 = document.getElementById("btn1");

移动端的touch click事件的理解+点透

移动端的touch click事件的理解+点透 移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart - touchmove - touchend - touchcancel .preventDefault() 就可以阻止本次点击系统触发的click事件,即本次相关的click都不会执行 把上面代码稍微加一点 level10.addEventListener('touchstart', function(e) { console.log(1); var level11 = document.getElementById("level1-1");

11、组件入门及写个首页头部组件

11、组件入门及写个首页头部组件 前言:项目准备工作说了很久,不知道大家学会了没有?今天开始我们开始正式搭建页面,先从首页开始,在搭建页面的过程中,我也会将vue的知识点在其中穿插讲解,但是你最好是提前看看官方文档

HTML之frameset导航框架

HTML之frameset导航框架 身为一个刚从机械转到学程序的菜鸟小白,第一次写文章,排版各方面都比较粗糙,过程也难免会有错漏,望大神指正,不慎感激,写这些也只是为了总结知识点罢了。好了,废话不多说了。 一、新建all.html### 二、新建index.html### a{text-decoration:none} frame_a frame_b frame_c 三、新建frame_a.html### frame_a 四、新建frame_b.html### frame_b 五、新建frame

CSS组合选择符

CSS组合选择符 组合选择符说明了两个选择器直接的关系。 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得元素的后代元素。 以下实例选取所有 元素插入到 元素中 实例 后代选取器 div p { background-color:yellow;

webpack构建VUE项目使用jquery及其插件 expose-loader

expose-loader?vue$/, loader: 'vue-loader' }, { test: /\.css-loader' }, { test: /\.(eot|svg|ttf|woff|woff2)(\?(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].jquery' import 'jquery.easing' //插件可用 在用了最新版的webpack2.0和expose-loader之后,记得在原有代码上加上-loader,不然会失效

webpack import css文件的环境配置遇到的Module build failed: U

中loader:中并没有-loader尾缀,在2.0中必须加入此尾缀可以解决问题 接着在main.js用es6语法引入相应路径的css即可 import '.css-loader即可,另一种就是。。。不配置这项信息,没错就是备注掉整个css配置项。。。。像这样 // { // test: /\.css-loader' // } 然后博主就跟着这个偏方走了一遭,结果真的。。。运行成功了,恩至今没想通为啥,不过既然能解决问题,大家不妨试一试~

Web APP 二

_subWv) { var _subInfo = getSubInfoById(subInfos, targetTab); _subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles); mainWv.append(_subWv); } _subWv.show(); /** * 隐藏之前的webview */ plus.webview.getWebviewById(activeTab).hide('none'); activeTab = targetTab; }); }); /** * 重写mui.back(),一秒内连续点击两次,退出应用,仅安卓有效; */ var first = null; mui.back = function() { if(!

Web APP 五

"); return; } $('#btn').attr("disabled","disabled"); //网页面上挂数据 var html = ' '; html += ' '; html += ' '; // html += ' '; html += ' '; html += text; html += ' '; html += ' '; html += ' '; html += ' '; html += ' '; html += ' '; $('#conlist').append(html); var url = "http://jisuznwd.market.alicloudapi.com/iqa/query?

CSS: clear 清除浮动 解决网页中的“塌陷”问题

CSS: clear 清除浮动 解决网页中的“塌陷”问题 什么是塌陷 如果父级元素只包含浮动元素,那么在未设置高度的情况下,父级元素的高度塌陷为0;#wrap{border: black 5px solid;text-align: center;} #child3{background-color: blueviolet;/*content属性 : 添加的内容写在这个属性中,与伪对象同时出现 必须有该属性*/ display: block;/*visibility:可视化属性,控制元素是否可见,始终保留元素的物理空间*/ height: 0;

利用定时器和css3动画制作文字依次渐变显示的效果

} div,span{ color: #ffffff; } @keyframes text { 0%{ color: transparent;addClass('display') },index*150) }) 这里主要分两步 第一步 利用setTimeout的延时效果依次将文字显示出来,每个文字显示的时机都是 index*150 ms,其实这时主要效果已经出来了,类似那种打字的效果 第二步 利用animation与keyframe实现每个字的渐变效果,颜色从透明过渡到#fff,这样每个字连起来,就实现了如上图的效果demo体验地址

js寻路模式

var beginLi = oUl.getElementsByClassName('sty1');i map.length; } else if(map[i] == 2){ oLi.className = 'sty2'; // 递归操作,重复执行函数 } // 过滤走过的路线 function closeFn(nowLi){ closeArr.push( nowLi ); } // 找到当前网格周围的八个网格 for(var i=0; findParent(lastLi); } findParent(li.parent); } var timer = setInterval(function(){ result[iNow]. } })(map,sizeGird,speed) 在线预览实例 ?

canvas初识

canvas初识 canvas是html5中新增的标签,用于配合js绘制图形 创建一个画布 #box{ position: absolute; right: 0; margin:50px auto; background-color: #eee;canvas 是一个二维网格。左上角坐标为 (0,0) 利用js画一个矩形 var c=document.getElementById("box"); var ctx=c.getContext("2d"); ctx.fillStyle="#00bcda"; ctx.fillRect(0,0,150,75);

盒模型

盒模型 相信只要是接触过前端的,一定会对盒模型有着深深地记忆,整理了一下: 盒模型,由内到外,分别是本身宽高、内边距、边框。然后盒模型还可以有外边距,之后解释。 本身宽高,没啥说的了; 内边距即padding,表示从元素本身内容到元素边框的距离,分上下左右四个方向,可以有1~4个值,如下: padding:10px;第三个值表示下,padding-bottom=30px padding:10px 20px 30px 40px;

新手如何解决css外部导入不起作用思路

新手如何解决css外部导入不起作用思路 HTML使用CSS样式一共有如下三种方式:1.内联样式- 在HTML元素中使用"style"属性;2.头部 区域使用;3./public/css/bootstrap.min.css",返回到MyChat目录检索public/css/bootstrap.min.css,回顾一下目录结构,可以检索到css文件。 扩展:如果把上面的MyChant文件放在服务器web根目录,用"public/css/bootstrap.min.css",是可以直接引用css文件。

webpack使用体验

/dist')) console.log(path.resolve(__dirname, '.真是无力吐槽。真正有用的信息总是被垃圾信息掩盖,不过费了九牛二虎之力,还是找到了行之有效的解决办法,传送门。这里利用了extract-text-webpack-plugin的publicPath属性,这个属性的作用是,重新设置loader解析出来的文件的publicPath。作用就是,比如你在css里面本来的引用路径是'assets/images/demo.png',通过设置publicPath,引用路径就变成了'.

BeautifulSoup 爬取网络数据(1)

BeautifulSoup 爬取网络数据(1) 0. 前言 在介绍BeautifulSoup模块前, 我们先分析一下我们要爬取的网页结构是什么样的。通常网页都包含层叠样式表(英文全称:Cascading Style Sheets),例如。 推荐使用谷歌浏览器或者火狐浏览器方便快捷查看网页结构。例如在chrome中百度首页右击,选择'inspect',即可查看到网页结构,以及各个标签层级关系。 image 1. 创建爬虫爬取网页 爬取网站:url

vue引入全局sass引发的报错血案

scss$/, loaders: ["style", "css", "sass"] } 配置成功,接着以为可以在vue组件上用得风生水起了, 解决当在main.js 文件上引起reset.scss和global.scss文件时出现上图报错, 接着搜索度娘说需要使用sass-resources-loader引入全局sass什么的, 跟着网上的教程安装插件,然后在build/utils.js上配置 scss: generateLoaders('sass').

Vue 组件的<style>中设置 scoped 遇到的坑

minin.scss的公共文件,是不能单独放在App.vue中的,每个使用了的组件都需要单独引入。 App.vue // 不加scoped // 公共样式放在这里 @import 'src/css/common';感谢浏览,欢迎评论指正,相互学习,转载请标明出处。 参考 在vue组件中style scoped中遇到的坑

21three.js粒子系统(一)

21three.js粒子系统(一) image.png image.png 21three.js粒子系统 body{margin: 0;overflow: hidden;position: relative} 粒子系统 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000); camera.position.set(0,0,150); camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor('#a5efa5'); renderer.setSize(window.innerWidth