doraemon960320-CSDN博客

原创第十二章 - flex布局

flex布局操作方便，布局极为简单，移动端应用很广泛 pc端浏览器支持情况较差 IE11或更低版本，不支持或仅部分支持[建议]如果是pc端页面布局，使用传统布局较多如果是移动端或者不考虑兼容性问题的pc端布局，使用flex弹性布局1. flex布局原理1.1 布局原理flex:弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设置flex布局以后，子元素的float,clear和vertical-align属性将失效，伸缩布局=弹

2021-11-25 09:45:56 183

原创第十一章 - CSS3新特性

CSS3新增了选择器，可以更加便捷，更加自由的选择目标元素属性选择器结构伪类选择器伪元素选择器1. 属性选择器属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性且以val开头的E元素 E[att$="val"] 匹配具有att属性且以val结

2021-11-23 22:01:10 354

原创第十章 - HTML5新特性

1. HTML5新特性HTML5新特性主要是针对于以前的不足，新增了一些新的标签，新的表单和新的表单属性等。1.1 HTML5新增的语义化标签<header>头部标签 <nav>导航标签 <artical>内容标签 <section>定义文档某个区域 <aside>侧边区域 <footer>尾部标签[注]这种语义化标准主要是针对浏览引擎的这些新标签在页面中可以使用多次在IE9中，需要把这些元素转换为块

2021-11-23 21:43:18 135

原创第九章 - CSS扩展

这一章学习一些关于CSS比较常用的其他知识，主要讲解精灵图，字体图标，小三角的画法，溢出省略号的显示等的实现。1. 精灵图精灵图的出现主要为了有效减少服务器接收和发送请求的次数，提高页面加载速度。使用精灵图的核心：精灵图技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中这个大图片也称为sprites精灵图或雪碧图移动背景图片位置，此时可以使用background-position 移动的距离就是这个目标图片的x坐标和y坐标。主要，网页中的坐标有所不同一般情况下，

2021-11-18 21:42:21 181

原创第八章 - 元素的显示与隐藏

我们在浏览网页时，经常会看到有些图片上面带一个小叉号，当我们点击小叉号的时候，图片就会消失，当我们重新刷新网页时，图片还会显示出来，这就用到了元素的显示与隐藏。本质：让一个元素在页面中隐藏或显示出来。display:显示隐藏元素，但是不保留位置 visibility:显示隐藏元素，但是保留原来的位置 overflow:溢出显示隐藏，但是只对溢出部分进行处理下面就对这三个属性进行详细的描述1. display属性display属性用于设置一个元素应该如何显示display:none隐

2021-11-18 20:52:16 77

原创第七章 - 定位

1. 定位1.1 为什么需要定位？1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的，要实现这个效果，标准流或浮动都无法实现，此时需要定位来实现。浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子1.2 定位组成定位：将盒子定在某一位置，所以定位也是摆放盒子，按照定位的方式移动盒子定位=定位模式+边偏移定位模式

2021-11-18 18:31:33 249

原创第六章 - 浮动

1. 浮动1.1 传统网页布局的三种方式网页布局的本质，就是用css来摆放盒子，把盒子摆放到相应的位置。css提供了3种传统的布局方式(简单说就是盒子如何进行排列顺序)普通流(标准流) 浮动定位下面就要对这3种传统的布局方式进行一一讲解1.2 标准流(普通流/文档流)所谓标准流：就是标签按照规定好的默认方式进行排列1. 块级元素会独占一行，从上向下按顺序排列常用元素：div hr p h1-h6 ul ol dl form table等2. 行内元素会按照顺序，从左

2021-11-18 16:52:42 235

原创第五章 - CSS盒模型

我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。1. 盒模型1. 1 看透网页布局的本质我们在进行网页布局的过程中，需要做以下准备：先准备好相关的网页元素，网页元素基本都是盒子BOX 利用CSS设置好盒子样式，然后摆放到相应位置往盒子里面装内容网页布局的核心本质：利用CSS摆放盒子1.2 盒子模型组成所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。CSS盒模型本

2021-11-18 12:08:16 202

原创第四章 - CSS三大特性

这一章节主要描述CSS非常重要的三大特性：层叠性，继承性和优先级。下面对这三个特性分别进行介绍1. 层叠性看到这个标题，我们不禁会想，层叠性？？？这个层叠性是会覆盖的意思吗？没错，就是会出现覆盖样式的问题，当我们给相同的选择器设置不同的样式的时候，在相同权重的情况下，后面设置的样式会覆盖掉前面设置的样式，这就实现了CSS的层叠性。[注]层叠性原则：样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行哪个样式。样式不冲突：不会层叠利用下面的示例进行演示：```CSS&lt

2021-11-18 09:48:25 55

原创第三章 - CSS背景

前面简单的学习了文本样式，字体样式，以及一些css选择器等，这篇主要来学习一下css的背景属性。1. css背景复合写法css背景属性可以设置背景颜色，背景图片，背景平铺，背景图片滚动，背景图片位置等。background: background-color | background-image | background-repeat | background-attachment | background-position;background: red url(image/img.pn

2021-11-17 20:41:54 95

原创第二章 - CSS元素显示模式

引言看到这个标题，我们不禁会思考，什么是CSS元素的显示模式？看到这个标题，我脑海中首先浮现的元素以什么样的方式呈现？分别有哪几种方式？带着这个问题，开启下面的篇章。1. 什么是CSS显示模式？元素的显示模式就是元素(标签)以什么方式进行显示，比如<p>标签独占一行，<span>标签在一行内可以显示多个。其实，HTML元素分为块级元素和行内元素两种类型1.1 块级元素前面学过了HTML的一些标签，我们通过实际验证可以知道，块级元素包括<h1>-&l

2021-11-17 20:27:52 118

原创第一章 - CSS选择器

引言前面我们学习了HTML的一些基础知识，了解了HTML是前端开发中用于书写结构的标签，我们在浏览网页时，会看到页面内容的各种好看的样式，这些样式的实现是通过CSS来实现的，CSS的主要使用场景就是美化网页，布局页面的CSS也是一种标记语言。CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形(宽度，边框样式，边距等)以及版面的布局和外观显示样式。下面讲解一些CSS的基础内容1. CSS选择器1.1 选择器的作用选择器就是根据不同的需求把不同的标签选出来，

2021-11-17 17:01:28 780

原创第二章 - HTML标签

1 HTML语法规范标签关系：包含与并列关系2 HTML基本结构标签标签名定义说明 <html></html> HTML标签页面中最大的标签，我们称之为根标签 <head></head> 文档的头部注意head标签中我们必须设置的标签是title <title></title> 文档的标题让页面拥有一个自己的网页标题 <body><.

2021-11-14 11:56:55 379

原创第一章 - 初识HTML

现实生活中，我们浏览网页，看到的一些东西大多数都属于html文件格式，那么我们会斯卡一个问题，什么是html呢？接下来的内容，将会介绍一些html的基础知识一什么是HTML?HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。[注]HTML不是一种编程语言，而是一种标记语言。所谓超文本语言，有2层含义：1. 他可以加入图片，声音，动画，多媒体等内容(超越了文本的限制)2. 它还可以从一个文件跳转到另一个文件，与世界各

2021-11-14 11:00:33 635

原创 Math.max()的使用

今天遇到了Math.max()的问题，想要返回数组中的最大值，不知道怎么返回，于是查了MDN，发现Math.max()原来是这么使用的1.当返回一组数中的最大值时，直接Math.max(10,30,20);//302.当返回数组中的最大值时，前面要加...,let arr=[1,0,2,5,3,4];要想返回arr中的最大值，就可以直接使用Math.max(...arr),就可以返回arr中的最大值5了。...

2021-09-12 21:36:03 13038 6

原创 js-几种继承实现

复习的过程中遇到了js的继承方法，从ES5出发，讲解下面出现的几种js继承方法以及各自的优缺点1.原型链继承首先看一个比较容易想到的原型链继承，代码如下function Parent(name){//父类构造函数 this.name=['佩奇'];}Parent.prototype.sayHello=function(){ return '你好'}function Child(){ //子类构造函数}Child.prototype=new Parent()

2021-08-09 20:43:08 59

原创数组操作-reduce()方法

1.reduce()方法介绍本篇讲解数组的reduce()方法，reduce()方法可以提供很多方法，真的是太赞了。reduce(function(pre,cur,index,arr){},init);根据这个写法，我们可以清晰的看到reduce中可传入的参数，那么这些参数都代表什么含义呢？下面一一介绍：pre:表示上一次调用回调时的返回值，或者初始值init,cur:表示当前正在处理的数组元素index:表示当前正在处理的数组索引，若提供init值，则索引为0，否则索引为1Init

2021-08-05 10:45:54 278

原创数组扁平化

数组扁平化就是将多维数组转化成一维数组。以数组arr=[1,[2,3,[4,5]],6]为例。将其转化为一位数组。可以采用以下3种方式实现。var arr=[1,[2,3,[4,5]],6]方法1 利用数组自带的扁平化方法console.log(arr.flat(Infinity));//[1, 2, 3, 4, 5, 6]方法2 利用正则表达式var res2=JSON.stringify(arr).replace(/\[|\]/g,'');console.log(res2.s

2021-08-04 14:56:22 78

原创浅拷贝与深拷贝

1.引言这篇文章主要讲一下浅拷贝与深拷贝的实现，由于最近复习到了这个知识点，就写这篇文章加深一遍印象。看到这个题目，我们首先会想到：什么是浅拷贝，什么是深拷贝？浅拷贝就是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝，如果属性是基本数据类型，拷贝的就是基本类型的值，拷贝前后基本数据类型互不影响，也就是说，拷贝的基本数据类型如果改变，不会影响原始数据类型。但是如果属性是引用数据类型，拷贝的就是内存地址，如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝就是将一个对象从内存中

2021-08-03 22:08:06 65

原创节流函数的使用

1.什么是节流？节流有什么作用？这一篇来讲解什么是节流，节流就是当持续触发事件的时候，保证一定时间内只调用一次事件处理函数，一段时间内只调用一次。通俗点讲，就是当我们去食堂排队打饭的时候，无论有多少人排队，只有当你前面一个人打完饭之后，才能轮到你打饭，也就是说，在上一个人打饭的这一段时间内，食堂叔叔阿姨只为前一个人服务，当为前一个人服务完之后，才能开始为你服务。这个例子是不是通俗易懂。哈哈哈~~~下面言归正传，既然也是一段时间内，所以节流函数里面也需要使用定时器setTimeout,但是这里与防

2021-08-03 21:41:09 1504

原创防抖函数的实现

1.什么是防抖？防抖有什么作用？带着这个问题，开始本篇讲述，一开始听防抖我也是蒙蒙的，今天又遇到了，记录一下。加深印象。防抖就是当持续触发事件时，在一定时间内如果没有触发该事件，事件处理函数会执行一次，当在一定时间内触发该事件时，会清除定时器，只在最后执行一次。这里有清除定时器，所以，防抖函数里需要使用定时器。我们以输入框中输入内容为例，1s时间内在文本框中输入内容，如果1s内多次按下键盘按键，就清除定时器。直到1s时间到了之后输出最后结果。通俗讲，就是无论1s内按了多少次按键，都不会触发，

2021-08-03 20:57:32 691

原创仿蘑菇街项目

引言仿蘑菇街的Vue.js项目是我学习vue.js做的第一个项目，今天来重温一下项目实现的功能，记录一下，方便以后查看。首先需要创建项目，本项目采用cli-3脚手架创建项目，采用默认安装模式，没有安装vue-router和axios等组件，后续项目需要在安装。项目底部导航栏区域主要包括首页，分类，购物车和我的四个模块，点击对应的标题就会跳转到对应的界面中，展示对应的模块内容。下面即将切入正题，展示各个模块实现的功能以及对应的代码。图1为页面默认显示的内容。1.底部导航栏根据图1可以看出，底.

2021-07-24 16:25:31 5371

原创电商后台管理系统-权限管理模块

权限管理引言权限管理模块一共包括两个子组件，一个角色列表组件和权限列表组件，首先说一下角色列表实现的内容。1.角色列表角色列表的组织结构如图1所示图1 角色列表由图1可以看出，角色列表的顶部是由面包屑导航构成的，内容部分包括在卡片视图区中，由于之前已经将面包屑导航和卡片视图区封装好，这里只需引入即可，重点主要在卡片视图区的内容，首先引入elementui库中的按钮标签，下面就是表格标签，用来展示请求到的数据。表格第一列是以个展开列，添加type="expand",第二列是索引列

2021-07-19 16:59:25 1428

原创电商后台管理系统

利用Vue.js实现电商后台管理系统引言刚学完Vue.js，现学现卖，着手做电商后台管理的项目，刚刚将首页中用户管理的用户列表写完，写这篇文章记录一下这个项目的思路以及做的过程中遇到的小问题。一、项目初始化采用cli3创建项目，在终端处输入vue create learnshop创建好项目，本人采用的是默认形式创建项目，路由或其他配置后续用到的时候在安装的。创建好项目之后，安装路由，npm install vue-router --save，运行时依赖。安装好路由之后，将其放在src文件夹下面的

2021-07-10 17:26:39 1581 1

原创 JavaScript基础-数组冒泡排序

JavaScript基础-数组冒泡排序学过基础知识之后，自己重新练习的时候就记不起来了，为了查看方便，本篇文章记录一下关于数组的冒泡排序问题。为了使数组排序变得通用，将数组冒泡排序问题封装成一个函数，可以实现任意数组的排序问题。第一步就是封装函数第二步书写函数里面的内容要实现一个数组的排序的话我们进行下面的分析，首先考虑一个数组[5,3,10,2,8],冒泡排序的思想是将前后两个数从小到大排序第一次排序结果如下(一共比较了4次)：[3,5,2,8,10]第二次排序结果如下（一共比较了3次）:

2021-03-06 21:35:37 353

原创 CSS中网站TDK三大标签SEO优化

为了以后便于复习，记录一下三大标签的SEO优化1.SEO定义SEO(Search Engine Optimization)即搜索引擎优化，这是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式SEO目的SEO的目的是对网站进行深度优化，帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站知名度2. 页面中必须包含的标签为了复合SEO优化，页面中必须包含3个标签，这3个标签分别是title、description、keywords.2.1 title网站标题title具有

2020-12-23 20:32:29 189

原创 BOM概述笔记

1.BOM定义BOM(Browser Object Mode)是文档对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列对象构成，并且每个对象提供了很多方法和属性。BOM缺乏标准，JavaScript语法的标准化阻止是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。2.BOM和DOM的区别DOMBOM文档对象模型浏览器对象模型DOM就是把文档当做一个对象来看待BOM把浏览器当做一个

2020-11-20 10:55:20 98

原创 CSS制作小三角形

之前学习的使用CSS制作小三角形，今天再看发现已经记不起来了，写个笔记记录一下，方便以后查看~首先先回顾一个正方形,只要我们设置好宽高，就可以得到，代码如下：div{ width:100px; height:100px; border:1px solid #000; background-color:red;}这时我们就得到了一个非常简单的正方形。但是如果想画出一个三角形，代码该怎么写呢？其次我们可以这样来思考一下如果我们将正方形的宽高设置为0，那么这个形状就会消失，在没有宽高的情况

2020-11-19 21:40:56 2395

原创文档对象模型（DOM）的一些总结

DOM总结1.定义DOM是文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或XML）标准的编辑接口，W3C已经定义了一系列的DOM接口，都过这些DOM接口可以改变页面的内容、结构和样式2.操作元素对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。对于HTML,DOM使HTML形成一颗DOM树，包含文档、元素、节点。注：获取的DOM元素是一个对象(object),所以称之为文档对象模型。关于DOM操作，主要是针对

2020-11-19 16:18:44 154

zl960320的博客