- 博客(50)
- 收藏
- 关注
RSS订阅原创 grid布局
一、什么是grid布局？将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。主流浏览器基本兼容二、基本概念1、容器（有容器属性）2、项目（有项目属性）外层大盒子就是容器，里面具体的东西就是item3、grid布局中所具有的东西（重要的图）三、容器属性1、grid-template-*eg：grid-template-columns：100px 100px 100px (表示三列) grid-template-ro...
2021-01-26 16:37:09
12819
原创 Vue基础（五）
案例回顾父子组件之间的传值 <div id="app"> <com1 v-bind:parentmsg="msg" @func="getMsgFormSon"></com1> </div> <template id="tmpl"> <div> <h1>这是子元素 ---...
2019-12-18 15:49:20
139
原创 Vue基础（四）
1、父组件向子组件之间传值父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用注意：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法。子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通...
2019-12-18 15:12:23
245
原创 Vue基础（三）
1、Vue中的动画动画能够提高用户的体验，帮助用户更好的理解页面中的功能使用过渡类名在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类...
2019-12-16 15:32:24
254
原创 Vue基础（二）
1、过滤器概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；定义一个全局过滤器（也可以有多个全局过滤器），在vm实例中都是共享的过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递...
2019-12-14 18:05:39
102
原创 Vue基础（一）
1、什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层...
2019-12-13 16:39:24
240
原创 Node.js基础介绍
一、Node.js是什么1、是一个JS运行时环境（简单来说就是可以解析、执行js代码）：不是一门语言/库/框架，只是一个平台（1）Node.js中的JavaScript没有BOM、DOM，只有EcmaScript（基本语法），因为服务端不操作页面（2）在Node这个javascript执行环境中为js提供了一些服务器级别的操作API（文件读写、构建网络服务、网络通信、http服务器等）...
2019-11-28 22:14:33
70
原创 淘淘大型购物项目
一、项目介绍淘淘大型购物项目主要分为web移动端和pc端后台管理，采用前后端分离模式。前端编写过程中很依赖与后端环境，需要依赖后台提供的接口。 这种模式可认为是前后分离模式，也是接口化开发。web移动端主要包括首页、分类（一级分类、二级分类）、商品（搜索中心，商品列表、商品详情）、购物车（购物车管理）、用户（登录、注册、账户管理）、收获地址（展示、添加、编辑、删除）。pc后台管理页面包括登...
2019-11-28 21:36:34
197
原创 zepto与swiper的简要介绍
一、zepto1.1zepto.js API中文版1.2 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。1.3 Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、...
2019-11-17 18:27:11
393
原创 关于rem布局和适配
之前项目中遇到的一些布局1.伸缩布局 flex 2.流式布局 百分比 3.响应布局 媒体查询 （超小屏设备的时候：流式布局）共同点：元素只能做宽度的适配，高度不能适配（排除图片）更好的适配方案rem：宽度和高度都能做到适配（等比缩放）rem布局通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸4.1 把页面上px单位转换成rem单位 4....
2019-11-17 16:26:08
226
原创 less
1、less1.1 简要介绍CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于...
2019-11-17 15:34:30
180
原创 web移动（三）-响应式工具之bootstarp
Bootstrap1、简单介绍目前最流行的 HTML, CSS 和 JavaScript 框架，用于开发响应式，移动端先行的 web 项目，Bootstrap是当前最流行的前端UI框架(有预制界面组件)Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。Bootstarp...
2019-11-13 21:04:12
173
原创 web移动（二）-响应式布局
前端常见的布局方案一、静态布局(Static Layout)1. 布局概念最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。二、流式布局(Liquid Layout)1. 布局概念流式布局也叫百分比布局这边引入一下自适应布局:分别为不同的屏幕设置布局...
2019-11-11 19:49:18
242
原创 移动web(一)
移动web开发主要就是流式布局+viewprot流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局视觉窗口：视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。承载关系：浏览器---->viewport---->网页适配要求标准适配方案：1. 网页宽度必须和浏览器保持一致2. 默认显示的缩放比例和PC端保...
2019-11-10 21:53:43
324
原创 认识canvas
1、什么是Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度：<canvas id="myCanvas" width="2...
2019-10-28 21:29:15
98
原创 flex伸缩布局
重要性：布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。1、重要属性display:flex:如果父容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变...
2019-10-24 15:51:18
648
原创 AJAX
1、概述Web 程序初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：地址栏输入地址，回车，刷新 特定元素的 href 或 src 属性 表单提交这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应）， 如果我们可以通过 Jav...
2019-10-17 21:28:39
80
原创 HTML5接口
一、网络监听接口网络联通是触发这个事件，只与当前页面有关（window） 1、window.online用户网络连接时被调用 2、window.offline用户网络断开时被调用<script> /*1.ononline:网络连通的时候触发这个事件*/ window.addEventListener("online",f...
2019-09-12 13:35:02
1609
原创 HTML5和CSS3（一）
一、什么是HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改 支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏...
2019-09-10 11:47:53
237
转载 近20个绚丽实用的jQuery/CSS3侧边栏菜单
https://blog.csdn.net/yipanbo/article/details/50833203
2019-09-06 21:37:46
256
原创 jQuery特殊属性操作与事件机制及补充
1、jQuery特殊属性操作val方法val方法用于设置和获取表单元素的值，例如input、textarea的值//设置值$("#name").val(“张三”);//获取值$("#name").val();html方法与text方法html方法相当于innerHTML text方法相当于innerText//设置内容$(“div”).html(“<spa...
2019-08-17 15:06:56
130
原创 jQuery操作（样式、属性、动画、节点）
1. jQuery操作样式css操作 功能:设置或者修改样式,操作的是style属性。操作单个样式//name:需要设置的祥式名称//value:对应的样式值css(name, value);//使用案例$("one").css("background", "ray";//将背果色修改为灰色设置多个样式//参数是一个对象: 对象中包含了需要设...
2019-08-11 16:07:57
239
原创 jQuery初识与选择器
1、jQuery的基本概念为什么要学习jQuery？使用javascript开发过程中，有许多的缺点：1. 查找元素的方法太少，麻烦。2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。3. 有兼容性问题。4. 想要实现简单的动画效果，也很麻烦5. 代码冗余。什么是jQuery?jQuery的官网 ：https://jquery.comjQuery就是一个js库...
2019-08-11 10:39:35
124
原创 变速动画函数详解与案例
在之前的博客中，对于变速动画做了一个基本了解。现在我们来做进一步的了解在进一步了解之前，我们要知道一个问题：在获取元素的相关的样式属性的值的时候是用的offset系列来获取的，但是有一个问题offset系列来获取不一定是对的，假如元素没有脱标的话就看不到效果，所以我们用的是window.getComputedStyle（）window.getComputedStyle（元素，伪选择器/伪类...
2019-08-01 11:05:09
230
原创 JS+CSS的轮播图
1、简单轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } u...
2019-08-01 09:40:18
103
原创 动画函数（匀速与变速）
1、匀速动画函数案例：移动元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding:...
2019-07-31 15:50:11
660
原创 偏移量+客户区大小+滚动偏移
1、偏移量offset系列:获取元素的相关的样式属性的值 offsetWidth:获取元素的宽(有边框) offsetHeight:获取元素的高(有边框) offsetLeft:获取元素距离左边位置的值 offsetTop:获取元素距离上面位置的值在style标签中设置的样式属性获取不到，style属性中设置的样式属性是可以获取到的<!DOCTYPE html>...
2019-07-31 15:24:34
437
原创 DOM-事件详解
1、事件事件：触发-响应机制Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。事件三要素 事件源:触发(被)事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用var box = document.getElementBy...
2019-07-24 09:32:40
361
原创 DOM-节点操作
节点节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来) nodeType:节点的类型:1----标签,2---属性,3---文本 nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text nodeVal...
2019-07-22 20:28:45
90
原创 DOM-动态创建元素
1、创建元素的三种方式document.write("标签的代码及内容")document.write('新设置的内容<p>标签也可以生成</p>');<body><input type="button" value="创建一个p" id="btn"/>我喜欢喝哇哈哈和爽歪歪<script src="common.j...
2019-07-22 10:27:36
233
原创 DOM对象-对元素进行操作
属性操作非表单元素的属性href、title、id、src、classNamevar link = document.getElementById('link');console.log(link.href);console.log(link.title);var pic = document.getElementById('pic');console.log(pic....
2019-07-21 21:23:42
277
原创 DOM-文档对象模型
1、DOM的概念文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM 。DOM又称为文档树模型html页面中都有一个根标签--html--也叫根元素页面中的有一个根元素(标签--html),里面有很多的元素(有...
2019-07-21 20:17:56
141
原创 JavaScript的基本语法之内置对象（六）
实例对象:通过构造函数创建出来,实例化的对象 静态对象:不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用, 实例方法必须通过实例对象调用 静态方法必须通过大写的对象调用1、Math对象Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供，跟数学相关的运算来找Math中的成员（求绝对值，取整）常...
2019-07-16 12:18:43
239
原创 JavaScript的基本语法之对象（五）
1、对象为什么要有对象function printPerson(name, age, sex....) {}// 函数的参数如果特别多的话，可以使用对象简化function printPerson(person) { console.log(person.name); ……}什么是对象看的见,摸得到,具体特指的某个东西 现实生活中：万物皆对象，对象是一个具体的...
2019-07-16 09:29:32
140
原创 JavaScript的基本语法之变量与域解析（四）
1、什么是函数把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用函数的作用就是封装一段代码，将来可以重复使用2、函数的定义函数声明 （命名函数）function 函数名(){ // 函数体}函数表达式（匿名函数）var fn = function() { // 函数体}特点：函数声明...
2019-07-14 20:36:54
108
原创 JavaScript的基本语法之数组（三）
1、数组的概念所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。2、数组的定义数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。3、数组的作用:可以一次性存储多个数据4、 创建数组的方式1、通过构造函数创建数组 语法: var 数组名=new Array()...
2019-07-12 20:08:28
144
原创 JavaScript基本语法之操作符与流程控制（二）
1、操作符运算符 operator5 + 6表达式 组成 操作数和操作符，会有一个结果算术运算符+ - * / % 一元运算符一元运算符：只有一个操作数的运算符++ 自身加1-- 自身减1前置++var num1 = 5;++ num1; var num2 = 6;console.log(num1 + ++ num2);后置++var...
2019-07-11 21:23:33
99
原创 JavaScript的基本语法之变量与数据类型（一）
1、变量什么是变量 什么是变量 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据 为什么要使用变量 使用变量可以方便的获取或者修改内存中的数据 如何使用变量var声明变量 ： var age; 同时声明多个变量 ：var age, name, sex; age...
2019-07-11 20:02:35
118
原创 JavaScript基本介绍
1、JavaScript是什么Java 服务器端的编程语言JavaScript 运行在客户端(浏览器)的编程语言JavaScript是一种运行在客户端 的脚本语言 JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。2、JavaScri...
2019-07-10 19:57:59
228
原创 3D变形(CSS3)
2d ：x y3d ：x y z左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图简单记住他们的坐标：x左边是负的，右边是正的y 上面是负的， 下面是正的...
2019-07-10 19:43:34
318
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人