- 博客(26)
- 收藏
- 关注
RSS订阅原创 ES6的一些用法
非常好用的ES6语法一、关于取值二、关于合并数据三、关于拼接字符串四、关于if中判断条件五、关于列表搜索六、关于扁平化数组七、关于获取对象属性值八、关于添加对象属性九、关于输入框非空的判断十、关于异步函数的吐槽后续一、关于取值取值在程序中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}const {a,b,c,d,e} = obj;const f = a + d;const g = c +
2021-12-31 09:36:34
383
原创 前端同步异步解决方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>async和await</title></head><body> <div>
2021-02-02 10:37:08
622
1
原创 前端开发常用网站
MDN开发者文档：https://developer.mozilla.org/zh-CN/菜鸟教程：https://www.runoob.com/W3CSchool：http://www.w3school.com.cn/JavaScript教程网：https://zh.javascript.info/一行代码搞定bug监控：https://www.fundebug.com/?tdsourcetag=s_pcqq_aiomsgweb开发人员必备工具包（实现快速敲代码）:https://docs.em
2021-02-01 20:03:19
850
原创 18-媒体查询和移动端布局
媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。语法@media all and (min-width:320px) { body { background-color:blue;} }设备类型(默认值为
2020-07-25 16:54:17
237
原创 17-兼容
图片整合（精灵图、css sprites、css精灵、雪碧图）把网站里面的小图标有规则的整合在一起，利用 background-position 改变背景图的位置，每个图标应用。优点: （1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； （2）CSS Sprites能减少图片的字节； （3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对
2020-07-25 16:48:29
174
原创 16-grid布局
GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。grid布局预热容器和项目<!-- 以上代码section为容器、div为项目 （
2020-07-25 16:41:37
163
翻译 15css3-多列
css3-多列多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。多列属性1、column-count属性规定元素应该被分隔的列数适用于：除table外的非替换块级元素, table cells, inline-block元素2、column-gap属性规定列之间的间隔大小3、column-rule设置或检索对象的列与列之间的边框。复合属性。column-rule-color规定列之间规则的颜色。column-rule-style规定列之间规则的样式。column
2020-07-22 20:11:39
78
原创 14-怪异盒模型与flex布局
怪异盒模型box-sizingcontent-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。FLEX布局Flex容器：采用 Flex 布局的元素的父元素；Flex项目：采用 Flex 布局的元素的父
2020-07-22 20:08:40
116
原创 13-css3属性和选择器
CSS3CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。css3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变
2020-07-22 20:04:11
166
原创 12-css3d与动画
景深生活中的3d 区别于2d的地方1、近大远小 景深 程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）perspective: 1200px;（在父元素中使用）transform:perspective(1200px) （在子元素中使用）两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉perspective-origin观察3d元
2020-07-22 19:53:15
123
原创 11-css3
浏览器前缀-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀cs
2020-07-22 19:47:05
90
原创 10-bfc
BFCBFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC的布局规则一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的margin box的左边， 与包含块bord
2020-07-22 19:39:07
70
原创 09-表格补充
表格补充1 ： 数据行分组<thead></thead><tbody></tbody><tfoot></tfoot>2 ： 数据列分组<colgroup span="value"></colgroup><!--span属性为把几列分为一组-->3 ： 列标题<th></th>4 : 表格标题<caption></caption>
2020-07-22 19:37:35
117
原创 08-宽高自适应
宽高自适应 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。自适应的优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。宽度自适应 元素宽度设置为100%。（块元素宽度默认为100%） 或者不设置宽度（width）;（宽度是父元素的宽度）高度自适应1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）2)元素高度自适应窗口高度
2020-07-22 19:34:55
58
原创 07-定位
CSS文档流CSS 有三种基本的定位机制：普通流、浮动流、定位流。POSTIONposition定位属性，检索或设置对象的定位方式position属性值static默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static元素会忽略任何 top、bottom、left或 right 声明）absolute相对于已经定位父级元素、的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可
2020-07-22 19:32:32
76
原创 06-元素类型
元素类型根据css显示分类，XHTML元素被分为三种类型: 块状元素，内联元素，可变元素&&三种类型： 块状元素，内联元素，内联块元素(css2.1增加)块状元素的特点A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。C:块状元素都可以定义自己的宽度和高度。 D:块状元素一般都作为其他元素的容器，它可以容纳其它
2020-07-22 19:27:07
106
原创 05-css属性
CSS属性属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。文本属性1:文本大小 font-size说明： 1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。 2）单位还可以是pt，9pt=12px; 3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1
2020-07-22 19:25:50
82
原创 04-css基础
cssCSS(cascading style sheet) 汉译为层叠样式表,是用于控制网页样式WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制。目前推荐遵循的是W3C发布的CSS3.0版本；用来表现HTML或者XHTML等样式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0HTML + CSS弥补html语言的不足缩减页面代码，提高访问速度;代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验就会更好结构清晰，有利于seo优化
2020-07-22 19:23:29
85
原创 03-html表单
表单1 ： 表单标签<form></form> 属性 ： action = '接口地址' method = 'get / post' name = '表单名称'2 ： 表单控件<input> 属性： type = '控件类型' name：属性标识表单域的名称； Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。 maxlength：控制最多输入的字符数， Size：控制框的宽度（以字符为单位）1）
2020-07-22 19:21:42
63
原创 02-html5基础
HTML5发展史HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2020-07-22 19:20:08
156
原创 01-html基础
网站的建站流程页面图例网页的结构WEB标准WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准；（2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；计算机语言
2020-07-22 19:12:20
123
原创 JavaScript中数组的两种排序方法详解（冒泡排序和选择排序）
一、冒泡排序的原理（从小到大）相邻两个数进行比较，如果前一个数大于后一个数，那么就交换，否则不交换原理剖析比如有一组含有6个数字的数：5、3、7、2、1、6一共6个数字，做5次循环，每次循环相邻两个数都会进行一次比较。第一次循环：把最大的7放在了最后第二次循环：7已经放在了最下面，不用再比较了。上面的重新排序把最大的6最后也就是放在了7的上面第三次循环：6、7已经放在最下面，不用再次...
2020-03-21 12:14:46
368
原创 css3选择器
css3CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2...
2020-02-29 13:38:06
153
原创 H5新特性之语义化标签
说明顾名思义，语义化标签是带有自身意义的标签，在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。语义化结构标签section...
2020-02-29 11:08:51
134
原创 css3 3d旋转图片实现立方体
说明css3 3d在网页中有很多的应用，下面我们来用它制作一个正立方体。实现方法1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
2020-02-29 10:30:23
354
原创 css布局之盒模型
盒模型导读随着网络技术的不断发展，人们已经不再只关注网页的功能，还追求网页的性能和美观，于是css应运而生，一个完美的网页必然有一个完美的布局，而css盒模型是网页布局的基石，所以了解它对网页制作至关重要。一、什么是盒模型？一个经典的CSS盒子模型有四个属性：内容(content)、内边距(padding)、边框(border)、外边距(margin) 。这些属性我们可以用日常生活中的常见...
2020-02-22 13:37:09
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人