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

style

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

XSS、CSRF、点击劫持的防御

XSS、CSRF、点击劫持的防御 xss解决方案 XSS的本质还是一种“HTML注入”,用户的数据被当成了HTML代码一部分来执行,从而混淆了原本的语义,产生了新的语义。 一、HttpOnly 游览器将禁止页面的javascript访问带有HttpOnly属性的cookie HttpOnly并非为了对抗XSS——HttpOnly解决的是XSS后的Cookie劫持攻击。 如果该Cookie设置了HttpOnly,则这种攻击会失败,因为JavaScript读取不到Cookie的值。 一个Coo

SVG Sprite 使用Symbol元素制作ICON

vertical-align: -0.15em; fill: currentColor;第三步:挑选相应图标并获取类名,应用于页面: 例如我们要加入一个之前命名为icon-weixin1的微信图标,就在body中加入这段 demo代码 .svg-sprite-demo 333 预览效果:http://jsbin.com/qovicalote/edit?html,output 放大也不会失真和有锯齿

Vue2 介绍

Vue2 介绍 Vue 1.x 已经过时了,我们使用Vue 2.x。 数据绑定 vue文件开发方式 render方法 Vue是一个数据绑定的框架。响应式。 .vue 文件的开发方式。 export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App - Leo Malin' } } } #app { } Vue的一个特殊的开发方式,很方便。 使用这种方式,更加符合Vue是组件化的开发框架特点。 我们在一个 .

Vue - 指令 - (v-bind)

'complated' : ' ']" 如果完成了,那么就传入complated这个类,如果没有就不传递。注意,todo.completed是放在""(双引号)下面的。 经验: // 如果bool为true,那么`class=burst`,否则是`class=''`

Vue - 嵌套组件(Nested Component)

Vue - 嵌套组件(Nested Component) 图片.png eg: item.vue {{ todo.content }} export default{ props: { todo: { type: Object, required: true, } }, methods: { deleteTodo: function () { } } } todo.vue import Item from './item.vue' export default{ data(){ return {msg: 'hello vue'} }, components: { // 注册Item组件为自己的组件 Item, }, methods: { addTodo() { } } } todo.vue包含item组件为嵌套组件。

CSS之选择器

CSS之选择器 CSS是cascading style sheet 层叠式样式表的简写. CSS是从审美的角度复测页面的样式 标签选择器 标签选择器就是标签的名称 CSS之选择器 h1{ color: red; font-size: 30px; background: aquamarine;lei{ } ) 同一个标签可以有不同的class类,用空格隔开 知道抽取公共的类 CSS之选择器 h1{ color: red; font-size: 50px;da{ font-size: 60px;xian{ text-decoration: underline; width: 100px; height: 100px;

CSS的三大特性

CSS的三大特性 timg.jpg 继承性 子标签可以继承父类的标签的样式 并不是所有的属性都可以继承的 color,text-开头,line-开头,font-开头的 可以继承,关于文字样式的可以继承,所有关于盒子的,定位的,布局的属性不可以继承 a标签是不可以继承父类的color和font的 div设置文字样式,它的子类就会继承这些样式 CSS之选择器 div{ color: red; } div.hezi1 div.hezi2 div.hezi3 { color: blue;

元素的显示方式

元素的显示方式 timg.jpg 元素的分类 块级元素 特点:单独占一行,可以给这个元素设置宽高 显示方式(display):block 所属的标签有:div,p,h,ul,lo,ol,dl 行内元素 特点:可以多个标签放在一行,但是给标签设置宽高没有作用 显示方式(display):inline 所属的标签有:span,b,u,i,ins,strong

伪类

这是不是伪类 匹配所有作为第一个子元素的 元素中的所有 元素 在下面的例子中,选择器匹配所有作为元素的第一个子元素的 元素中的所有 元素: p:first-child i { color:blue;:lang 伪类 :lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型: q:lang(no) { quotes: "~" "~" } 文字 段落中的引用的文字 文字

盒模型

盒模型 timg.jpg 网页都是有盒模型组成,每个盒子都有自己的 width,height,padding,margin,border等组成 width:宽度,在CSS中是指内容的宽度,并不是盒子的宽度 height:高度,和宽度一样的原理 padding:内边距 border:变框 margin:外边距 注意:以后我们所说的宽度是指内容宽度 width.png 盒子模型 div{ width: 200px; padding: 100px; padding: 20px 30px 40px;div1{ width: 200px; margin-bottom: 50px;div2{ margin-top: 30px;

浮动和清除浮动

浮动和清除浮动 timg.jpg 浮动的作用就是解决一行之间显示多个盒子,并且盒子的位置可控的一种布局方式,在介绍浮动之前,先说明标准流 标准流 它是浏览器子在解析html的标签的默认的一种与稳定,也叫文档流 一般情况下,所有的标签都是标准流,浏览器在解析的时候不会按其他方式来解析,而 浮动就是一种脱离标准流的技术 浮动 1.浮动脱离标准流 浮动 .

Html之表格

Html之表格 timg.jpg 表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格. height: 190px; padding-left: 10px; } thead { border: 1px solid #D2E9F6; background-color:#D2E9F6 ;

JavaScript之事件

button.onclick = function () { var demo = document.getElementById("demo") demo.style.width = "300px" demo.style.height = "450px" } var button2 = document.getElementById("btn2") button2.onclick = function () { var demo = document.getElementById("demo") demo.style.backgroundColor = "red" } 入口函数 window.onload = function () { 内放js } 当页面加载完毕以后(结构,样式加载完),执行这个函数里面的JS 部分 百度换肤 *{ padding: 0;

scroll家族

scroll家族 timg.jpg scrollTop 是指当你滑动滚轮浏览网页隐藏在品目上方的距离 scrollTop.jpg onscroll 是页面滚动的事件 谷歌浏览器 和没有声明 DTD :使用 document.body.scrollTop; pageYOffset (scrollTop) document.compatMode判断是否怪异浏览器 CSS1Compat 已经声明,BackCompat 未声明 // 对获取scrollTop的封装 function scrool() { if (window.pageYOffset ! show(gotop) : hide(gotop); if (leader == target){ clearInterval(timer);

取整函数和样式属性访问

取整函数和样式属性访问 timg.jpg 取整函数 1.向上取整 函数 //1.取整函数 去大的 向上取整 var num = Math.ceil(1.02); console.log(num1); console.log(num2); // 2 访问 CSS样式 主要 外部(使用 )和内嵌(使用 )样式表中的样式 1. obj.currentStyle ie opera 常用 2. window.getComputedStyle("元素", "伪类") w3c //兼容性 function getStyle(obj,att) { if (obj.currentStyle) { return obj.currentStyle[att]; } } console.log( getStyle(box,"width"));

Client 家族

// 不带括号,只要屏幕出发,就调用,是一个 函数体 function reSize() { var clientWidth = client(). opacity: 0.4; } #logo { width: 300px; margin-left: -150px; } var box = $("box"); var login = $("login"); login.onclick = function (event) { //点击隐藏滚动条 document.body.style.overflow = "hidden"; box.style.display = "block"; if (event event.stopPropagation){ event.stopPropagation(); event.target.id : event.srcElement.id; if (targetId !

Web之jQuery操作DOM

Web之jQuery操作DOM timg.jpg DOM:Document Object Model(文档对象模型) 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。 目的其实就是为了能让js操作html元素而制定的一个规范。 1.jQuery操作DOM 1.1操作样式和CSS 1.1.1操作CSS类 addClass() - 向被选元素添加一个或多个类 $(document).css({ "font-size":"30px", "color":"red" }); $(function () { // alert($("div").attr({ "value":"这是一个input" }) });

perspective 视距

perspective 视距 视距的原则是:进大远小 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 透视效果是写在父亲身上。 perspective 属性只影响 3D 转换元素。 perspective取值为none或不设置,就没有真3D空间。 perspective取值越小,3D效果就越明显,也就是你的眼睛越靠近真3D。 perspective的值无穷大,或值为0时与取值为none效果一样。 注意 perspective属性,经

分享 webpack3.0 的安装与使用

分享 webpack3.0 的安装与使用 准备开始 webpack3.0 的安装 之前在很多网站上寻找webpack3.0的知识,但是结果都不理想。经过很多努力,终于学到了一些知识,现在把这些知识分享出来吧。(希望能对小伙伴有所帮助) 全局安装 1.jpg 2.jpg 3.jpg 4.jpg 局部安装 5.jpg 更新webpack 6.jpg webpack.config.js基本介绍 const path=require('path'); module.exports={ //模块导出 entry:{ entry:'./src/entry.js', entry2:'.