Leophen

2019年7月10日

摘要：一、普通的变量 1. 变量的定义方式：@ 2. 示例： less 文件： @blue:#5B83AD; #header{ color:@blue; } 编译后的 css 文件： #header { color: #5b83ad; } 二、作为选择器和属性名 1. 使用的时候将变量以“@{变量名}”的阅读全文

posted @ 2019-07-10 16:35 Leophen 阅读(241) 评论(0) 推荐(0) 编辑

LESS简介与使用方法

摘要： less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。一、传统写法与 less 写法对比 1. 传统 css 写法： .content ul{ list-style:none; } .content li{ height:24 阅读全文

posted @ 2019-07-10 12:31 Leophen 阅读(948) 评论(0) 推荐(0) 编辑

2019年7月7日

JavaScript 正则表达式

摘要：正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式，是用于匹配字符串中字符组合的模式。一、JS 如何创建正则表达式 1、隐式创建通过直接量定义 var str = 'I love js'; var pattern = /js/; / 阅读全文

posted @ 2019-07-07 12:36 Leophen 阅读(1335) 评论(2) 推荐(1) 编辑

2019年7月5日

JavaScript非构造函数的继承（ object()方法、浅拷贝与深拷贝）

摘要：一、什么是"非构造函数"的继承？比如，现在有一个对象，叫做"中国人"。 var Chinese = { nation:'中国' }; 还有一个对象，叫做"程序员"。 var Programmer ={ career:'程序员' } 要怎样才能让"程序员"去继承"中国人"？这里两个对象都是普通对象阅读全文

posted @ 2019-07-05 20:21 Leophen 阅读(449) 评论(0) 推荐(0) 编辑

JavaScript构造函数的继承

摘要：现在有一个"动物"对象的构造函数。 function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数。 function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫" 阅读全文

posted @ 2019-07-05 20:00 Leophen 阅读(2799) 评论(0) 推荐(0) 编辑

2019年7月4日

一个简易的css reset

摘要： /*css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元素*/ form, fieldset, legend, input, button, select, 阅读全文

posted @ 2019-07-04 21:07 Leophen 阅读(278) 评论(0) 推荐(0) 编辑

通过CDN引入jQuery的几种方式

摘要：百度 CDN <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> 新浪 CDN <head> <script src="https://lib.sinaapp.co 阅读全文

posted @ 2019-07-04 20:52 Leophen 阅读(48951) 评论(2) 推荐(0) 编辑

JavaScript中this详解

摘要： this 是 JavaScript 语言的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。上面代码中，函数 test 运行时，内部会自动有一个 this 对象可以使用。一、this 的值是什么函数的不同使用场合，this 有不同的值。总的来说，this 就阅读全文

posted @ 2019-07-04 19:13 Leophen 阅读(3044) 评论(0) 推荐(0) 编辑

JavaScript面向对象之封装

摘要： Javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程语言，因为它的语法中没有 class（类）。那么，如果我们要把"属性"和"方法"，封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？一、生成实例对象的原始模式这里我们把阅读全文

posted @ 2019-07-04 19:04 Leophen 阅读(554) 评论(0) 推荐(0) 编辑

JavaScript原型和原型链（ prototype 与 __proto__ ）

摘要：一、函数对象所有引用类型（函数、数组、对象）都拥有__proto__属性（隐式原型）所有函数拥有 prototype 属性（显式原型）（仅限函数）原型对象：拥有 prototype 属性的对象，在定义函数时就被创建关于 prototype 与__proto__ js中所有的函数都有一个 pr 阅读全文

posted @ 2019-07-04 18:13 Leophen 阅读(1949) 评论(0) 推荐(0) 编辑

JavaScript面向对象之对象的声明、遍历和存储

摘要：一、对象的声明 1. 使用字面量（json格式）的方式构建对象 2. 使用 new Object() 的方式构建对象 3. 使用 Object.create(obj) 的方式构建对象注意：使用此方式创建出来 obj.__proto__ = Foo 4. 使用构造函数的方式构建对象 5. 使用工厂方阅读全文

posted @ 2019-07-04 14:57 Leophen 阅读(510) 评论(0) 推荐(0) 编辑

JavaScript闭包（Closure）

摘要：一、变量的作用域要理解闭包，首先需要理解JavaScript的变量作用域。变量的作用域包括：全局变量和局部变量函数内部可以直接读取全局变量函数内部可以直接读取全局变量函数外部无法读取函数内的局部变量函数外部无法读取函数内的局部变量注意：函数内部声明变量时，如果不用var命令的话，实际上阅读全文

posted @ 2019-07-04 14:39 Leophen 阅读(208) 评论(0) 推荐(0) 编辑

JavaScript的数据类型及其检测汇总

摘要：一、什么是数据类型 1、基本类型值是不可改变的 var name = 'java'; name.toUpperCase(); // 输出 'JAVA' console.log(name); // 输出 'java' 占用空间固定，保存在栈中原始数据类型直接存储在栈(stack)中的简单数据段，占阅读全文

posted @ 2019-07-04 14:19 Leophen 阅读(354) 评论(2) 推荐(0) 编辑

CSS3之响应式布局及其应用

摘要：使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=”no”> /*参数说明： - width=dev 阅读全文

posted @ 2019-07-04 00:46 Leophen 阅读(445) 评论(0) 推荐(0) 编辑

深入理解 CSS - Flex 布局

摘要：一、Flex 布局的由来 1、css 2.1 CSS2.1 定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与位置的算法：块布局：呈现文档的布局模式行内布局：呈现文本的布局模式表格布局：用表格呈现2D数据的布局模式定位布局：能够直接地定位元素的布局模式，定位元素奴基本与其他元素没阅读全文

posted @ 2019-07-04 00:14 Leophen 阅读(236) 评论(0) 推荐(0) 编辑

2019年7月3日

响应式开发移动端入门必备知识

摘要：一、移动端布局计算 Flex：采用Flex布局的元素，它的所有子元素自动成为容器成员，可以自动分配空间，适合做移动端开发 rem：在不同的设备上显示不同的效果，因此适合做移动端开发二、移动设备常见属性 physical pixel：物理像素值（屏幕分辨率） device-independen 阅读全文

posted @ 2019-07-03 23:48 Leophen 阅读(294) 评论(0) 推荐(0) 编辑

CSS3过渡与动画

摘要：一、CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -moz-transition-property: none / all / property; -ms 阅读全文

posted @ 2019-07-03 23:18 Leophen 阅读(682) 评论(0) 推荐(0) 编辑

CSS3常用转换总结

摘要：一、2D转换 translate(npx,npx) 相对当前元素位置移动 /* 实现div向左移动50个像素，并向下移动100个像素 */ div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* 阅读全文

posted @ 2019-07-03 19:38 Leophen 阅读(365) 评论(0) 推荐(0) 编辑

CSS3背景与渐变

摘要：一、CSS3 背景图像区域 background-clip（指定背景绘制区域） ackground-clip: border-box / padding-box / content-box; /*没有padding的时候，content-box和padding-box效果一样*/ 兼容性：IE9+、阅读全文

posted @ 2019-07-03 14:59 Leophen 阅读(399) 评论(0) 推荐(0) 编辑

CSS3边框与圆角

摘要： 1. CSS3 圆角 border-radius 属性一个最多可指定四个border -*- radius属性的复合属性，这个属性允许你为元素添加圆角边框！语法：border-radius: 1-4 length|% / 1-4 length|%;兼容性：IE9+、FireFox4+、Chrome 阅读全文

posted @ 2019-07-03 14:50 Leophen 阅读(284) 评论(0) 推荐(0) 编辑

公告