- 博客(39)
- 收藏
- 关注
RSS订阅原创 CSS3 grid layout（网格布局）（八）
让我们接着来看网格布局基于线的定位在之前的博文中，我介绍了如何使用线编号来排列元素，本篇博文则会全面探索这个基础特性如何工作。当我们使用网格布局创建网格轨道的时候，网格线也会被同时创建。每条网格线都有对应的编号，而且编号的规则则是根据书写方向来决定的，例如像英语这种从左至右书写的语言中，列线1将位于网格的左侧。而在从右到左的语言中，列线1行将位于网格的右侧。之后我们会深入探讨书写模式和网格间的交互。基础例子在下面这个非常简单的例子中，我使用了3行3列的布局，也就是说，在从上至下，从左至右这两个大方
2020-06-08 19:14:01
306
原创 Node.js自学笔记-服务器端部分(二)
3.4 响应报文1.HTTP状态码200 请求成功404 请求的资源没有被找到500 服务器端错误400 客户端请求有语法错误可以使用 res.writeHead()方法来设置返回的状态码2.内容类型text/htmltext/cssapplication/javascriptimage/jpegapplication/json设置方法如下res.writeHe...
2020-04-20 11:18:44
186
原创 Node.js自学笔记(六)
5.2模块查找规则-当模块没有路径且没有后缀时require('find')Node.js会假设它是系统模块Node.js会去node_modules文件夹中首先看是否有该名字的JS文件再看是否有该名字的文件夹如果是文件夹看里面是否有index.js如果没有index.js则查看该文件夹中的package.json中的main选项确定入口模块文件否则就会找不到报错下面请看示...
2020-04-02 10:51:38
153
原创 Node.js自学笔记(五)
五、Node.js中模块加载机制5.1模块查找规则-当模块拥有路径但没有后缀时require方法根据模块路径查找模块，如果是完整路径，直接引入模块。如果模块后缀省略，先找同名JS文件，再找同名JS文件夹如果找到了同名文件夹，那么则会在该文件夹中找jindex.js文件如果文件夹中没有index.js，则会去当前文件夹中的package.json文件中查找main选项中的入口文件如果找...
2020-03-27 16:41:37
179
原创 Node.js自学笔记(四)
4.6.3 项目依赖在项目开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖使用npm install 包名命令下载的文件会默认被添加到package.json文件的dependencies中4.6.4 开发依赖在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖使用npm install 包名 --save-dev命令将包添加到package.json...
2020-03-26 16:25:29
114
原创 Node.js自学笔记(三)
下面我将利用Gulp完成一个复制文件夹的操作第一步：在gulpfile.js中编写任务复制好的文件夹将被输出到dist目录下。第二步：在命令行中执行任务最后来查看效果可以看到，原本在src目录下的imgs文件夹已经被完完全全的复制到了dist目录当中。4.6 package.json文件4.6.1 node_modules文件夹的问题文件夹以及文件过多过碎，当我们将项目整体...
2020-03-20 17:07:14
160
原创 Ajax自学笔记(一)
一、Ajax 编程基础什么是 Ajax？Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现 异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax 技术可以解决的传统网站中存在的以下问题...
2020-03-16 09:53:51
115
原创 Node.js自学笔记(二)
三、系统模块3.1 什么是系统模块Node运行环境提供的API，因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提供的API为系统模块。3.2 系统模块fs(file system) 文件操作readFile 读取文件语法示例fs.readFile('文件路径/文件名称'[,'文件编码'],callback);代码如图执行结果如图PowerShell可...
2020-03-10 20:40:57
232
原创 Node.js自学笔记(一)
一、Node.js基础1.1 Node.js 的组成Node.js是由 ECMAScript 及Node环境提供的一些附加API组成的。核心语法为ECMAScript。1.2 Node.js基础语法所有的ECMASript语法在Node环境中都可以使用。1.3 Node.js文件的执行通常情况下，.js文件是要依赖于.html文件的引用才可以执行的。在Node.js开发中，是没有.ht...
2020-02-16 18:47:33
345
原创 CSS3 grid layout（网格布局）（七）
让我们接着来看网格布局网格间距在两个网格单元之间的 网格横向间距 （后续我会称其为列间距） 或 网格纵向间距 （后续我会称其为行间距）可使用 grid-column-gap 和 grid-row-gap 属性来创建，或者直接使用两个合并的缩写形式 grid-gap。在下面的例子中，我会创建一个列间距为10px、行间距为1em的网格区域。代码如下<style> ...
2020-01-13 20:14:12
347
原创 CSS3 grid layout（网格布局）（六）
让我们接着来看网格布局八、网格线我们在使用网格布局创建网格轨道的同时也会创建 网格线，在正常的页面下我们是看不到这些网格线的，但当我们打开浏览器的 开发者工具（F12） 时这些网格线便会显现。不过在我之前的几篇关于网格布局博客的例子中，大家应该已经发现了网格线的存在。下面我将介绍网格线的一些特点和功能。网格线的寻址网格线可以用它们的编号来寻址。在从左到右的语言（即文字的 写入方向），比如英...
2020-01-13 15:06:34
466
原创 CSS3 grid layout（网格布局）（五）
让我们接着来看网格布局七、有关显式网格和隐式网格在之前例子中，我们使用 grid-template-columns 和 grid-template-rows 来构建我们的网格。根据我们对这俩个属性的设置所划分出来的区域就是 显式网格。当网格元素的数量多于由我们自己设置的列轨道和行轨道划分出的区域数量时，网格容器就会 自动生成 具有 默认宽度或者高度 的的行轨道和列轨道，这些由网格容器自动生成...
2020-01-09 21:00:35
700
原创 CSS3 grid layout（网格布局）（四）
让我们接着来看网格布局有关 fr 单位的补充：我的上一篇关于网格布局的博客中介绍了一个新的单位 fr 的特性，使用方法，以及与网格轨道搭配所产生的页面效果，现做如下补充：与其他长度单位混合所产生的页面效果下面先放上例子代码如下：<style> .wrapper { height: 100%; display: grid; ...
2020-01-08 21:03:26
405
原创 CSS3 grid layout（网格布局）（三）
让我们接着来看网格布局五、fr单位网格轨道可以使用 任何 长度单位进行定义。 网格还引入了一个另外一个长度单位来帮助我们创建灵活的网格轨道，那就是 fr 。fr 代表网格容器中可用空间的一等份，并且受其影响的网格轨道会随着可用空间的变化 增长 或者 收缩 。fr 的数量表示在行或列中 可容纳的网格轨道 的 数量 ，而 fr 值的大小则决定了 网格轨道所占的比例，如下的几个例子将详细解释 。请...
2020-01-07 20:57:11
376
原创 CSS3 grid layout（网格布局）（二）
让我们接着来看网格布局四、网格轨道我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的 行 和 列。这些属性定义了网格的轨道。一个网格轨道就是网格中 任意 两条线之间的空间。在下图中你可以看到一个高亮的轨道——网格的第一个行轨道。这个行轨道的生成方式十分简单，我们只需要在之前例子的代码（详参我的上一篇有关网格布局的博客 grid ...
2019-12-30 21:02:10
330
原创 CSS3 grid layout（网格布局）（一）
一、概述CSS 网格布局 擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。像表格一样，网格布局让我们能够按 行或列 来对齐元素。 然而在布局上，网格比表格更可能做到或更简单的去完成一些布局要求。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。二、网格布局的特点1.使用固定或者弹性的轨道大...
2019-12-30 20:07:02
702
原创 两种方式实现圣杯布局
弹性盒子<!DOCTYPE html><html lang="en"><head> <style> body { font: 24px Helvetica; background: #999999; } #main { ...
2019-12-29 22:07:25
282
1
原创 JS 插入排序
插入排序插入排序（Insertion sort）是一种简单直观且稳定的排序算法。如果有一个已经有序的数据序列，要求在这个已经排好的数据序列中插入一个数，但要求插入后此数据序列仍然有序，这个时候就要用到一种新的排序方法——插入排序法,插入排序的基本操作就是将一个数据插入到已经排好序的有序数据中，从而得到一个新的、个数加一的有序数据，算法适用于少量数据的排序，时间复杂度为O(n^2)。是稳定的排序方...
2019-12-27 10:23:28
245
原创 canvas绘制电子时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-12-26 19:55:01
306
1
原创 js全选按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选功能</title></head><body> <p> <span>全选</span> <input...
2019-12-26 19:32:01
259
原创 随机点名器
```bash<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 1000px; ...
2019-12-26 19:26:53
252
原创 html 放大镜
HTML 部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/st...
2019-12-26 19:13:51
508
原创 今日面试五题
第一题 下面哪几个和 [http://store.company.com/dir/page.html](http://store.company.com/dir/page.html) 符合同源策略？( ) A.http: //store.company.com/dir2/other.htm B.https: //store.company.co...
2019-12-21 09:59:17
349
原创 切换式轮播图
HTML部分div><img src="img/2233.png"></div> <div class="wrap"> <ul class="list"> <li class="item active"><img src="img/2233_1.jpg" >&...
2019-12-02 14:35:04
288
原创 利用Vue+Element-ui实现简单的增删改功能
HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/th...
2019-11-30 14:40:21
1077
原创 Js中的闭包
什么是闭包闭包是js中的一大特色，也是一大难点。简单来说，闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存溢出。闭包的三大特点为：1、函数嵌套函数2、内部函数可以访问外部函数的变量3、参数和变量不会被回收。举例来说：functio...
2019-11-12 19:56:41
240
原创 预编译（解析）
1.JS的编译和执行JS的解析过程分为三个阶段：语法分析（语法分析会在代码执行前对代码进行通篇检查，以排除一些低级错误），预编译期(预处理、预解析、预编译)与执行期。预编译期JS会对本代码块(script)中的所有声明的变量和函数进行处理，但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。执行期就是在编译后的基础上开始从上到下执行脚本，遇到错误时中断...
2019-11-11 21:32:37
335
原创 常用的正则表达式
常用的正则表达式验证数字：^ [0-9]$验证n位的数字：^\d{n}$验证至少n位数字：^\d{n,}$验证m-n位的数字：^\d{m,n}$验证零和非零开头的数字：^(0|[1-9][0-9])$验证有两位小数的正实数：^ [0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数：^ [0-9]+(.[0-9]{1,3})?$验证非零的正整数：^+?[1-9] [0-9...
2019-11-09 15:28:31
184
原创 利用API进行数组去重（持续更新）
/**indexOf去重 */function fun(arr){ var array=[]; arr.forEach(function(value,index) { if(array.indexOf(value)<0){ array.push(value); } }, this); return ar...
2019-11-09 15:24:58
509
原创 今日面试三题
今日面试三题1.js数组的方法中，哪些方法不能改变自身数组？（）A.popB.spliceC.sortD.concat正确答案：D解析：pop()：用于删除并返回数组的最后一个元素，把数组长度减1，并且返回它删除的元素的值。如果数组已经为空，则pop()不改变数组，并返回undefined值splice()：向/从数组中添加/删除项目，然后返回被删除的项目，该方法会改变原始数组...
2019-11-09 15:03:29
747
原创 JS不使用数组方法进行数组去重
JS不使用数组方法进行数组去重方法一 function unique(arr) { //遍历数组arr，创建空数组result，用来装arr中不重复的值（重复的值只留一个） for(var i = 0,result = []; i < arr.length; i++){ //遍历数组result for(var j = 0 ;j < resu...
2019-11-02 14:27:52
822
原创 今日面试三题
今日面试三题1.以下输出结果为true的有 A.' ' == false B.' '== 0 C.' ' == [] D.' ' == {}正确答案:A,B,C解析：JS在做==运算时会将操作数转换为Number类型之后再操作，而 ’ '，false，0，[]都能转换为为数字类型0，而{}却转换不了，转换后为NaN,而NaN做任何运算返回都是false2.以下运算结果不是num...
2019-11-02 14:24:33
370
原创 JS分解质因数
JS分解质因数<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>分解质疑数</title> </head> <script> function b() ...
2019-10-28 18:37:13
2152
原创 今日面试三题
今日面试三题1. 如果子元素都为浮动，不能解决父类高度塌陷问题的是（）A.给父元素添加 clear: both;B.给父元素添加overflow: hidden;C.在浮动元素下方添加空div,并添加样式clear: both;D.设置父元素:after{content: “”;clear: both; display:block;overflow: hidden;}正确答案为：A解...
2019-10-26 14:33:04
572
原创 今日面试3题
今日面试3题1.以下样式中的h1的实际font-size为多少pxhtml { font-size: 32px;}body { font-size: 16px; margin: auto; padding: 0; width: 10rem;}h1{font-size: 2rem;}正确答案：64解析：rem：相对长度单位，相对于...
2019-10-20 16:42:26
1614
原创 HTML概述（2）
HTML概述（2）编写HTML文件的注意事项大部分HTML标签是由起始标签和结束标签两个部分构成，例如< p> < /p>、< table>< /table>。空标签是一种特殊的标签，及不包含任何文本也不包含其他子标签，通常以“<”开始，以“/>”结束，例如< br />< img />等。在编写HTML文件...
2019-10-20 16:10:05
270
原创 今日面试三题
今日面试三题1.下面关于CSS布局的描述，不正确的是？A. 块级元素实际占用的宽度与它的 width 属性有关；B.块级元素实际占用的宽度与它的 border 属性有关；C.块级元素实际占用的宽度与它的 padding 属性有关；D.块级元素实际占用的宽度与它的 background 属性有关.正确答案:D解析：witdh:宽度border：边框padding：内边距bac...
2019-10-14 03:31:02
3357
原创 HTML概述（1）
HTML概述(1)HTML发展过程超文本标记语言（Hyper Text Markup Language,HTML)是Internet上用来编写网页的主要语言；到目前为止，HTML已发展了多个版本，并在W3C(万维网联盟)组织的关注下不断完善。相关版本如下HTML 1.0 (1993.6 发布）HTML 2.0 (1995.11 发布）HTML 3.2 (1996.1 发布）HTML...
2019-10-14 02:38:59
535
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人