- 博客(24)
- 收藏
- 关注
RSS订阅原创 数据库学习记录
1、创建数据库create database2、删除数据库drop database3、数字类型常用:INT 、FLOAT、DOUBLE4、日期和时间类型常用：DATE5、字符串类型常用：CHAR、VARCHAR6、创建数据表CREATE TABLE table_name (column_name column_type);7、删除数据表DROP TABLE table_name ;8、插入数据INSERT INTO table_name ( field1, field2,
2021-01-13 20:36:20
426
原创 主流布局--双飞翼布局
主流布局–双飞翼布局什么是双飞翼布局？双飞翼布局最早是淘宝团队提出的，是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。HTML<div class="parent"> <div class="center"> <div class="inner"></div> </div> ...
2021-01-13 20:33:50
6559
原创 项目总结之图片懒加载的实现
应用场景：需要加载大量图片1、当我们一次性加载大量图片的时候，容易造成网络资源浪费，同时也可能造成服务器卡顿。2、图片懒加载的实现思路：我们需要做的是，当浏览器滚动的时候，对滚动事件进行监听，当图片距离视口的顶部大于浏览器可见视口的宽度的时，图片不加载，这样就可以减少网络资源的浪费。设置自定义属性data-src浏览器滚动监听这里需要涉及两个知识，防抖函数和节流函数函数防抖实现function debounce(fn){ var timer=null; var context=thi
2020-08-21 13:21:34
266
原创 添加购物车中的小球动画实现
实现动画效求1、先写好小球，确定小球的最终位置以及小球运动的轨迹，这里小球运动的轨迹是贝塞尔曲线，并且使用v-if=false将小球隐藏html:css:2、触发小球的状态改变，这里我使用的场景是，点击添加购物车，然后就将小球的v-if=true，同时将此时被点击的dom元素记录。此时小球的状态改变触发了小球过渡的动画。3、先分析动画的beforeEnter钩子函数，这个阶段是入场前的回调做了些什么呢？获取到记录被点击的元素dom,也就是此时添加购物车的“+”号根据DOM获取
2020-08-20 20:45:32
757
转载 css主流布局--圣杯布局
css主流布局–圣杯布局圣杯布局是来源于该布局效果类似圣杯而得名，简单的来说，就是指三行三列的布局。圣杯布局的核心在于中间主体部分：左右定宽+中间自适应的布局效果HTML <div class="left"></div> <div class="center"></div> <div class="right"&g...
2020-02-20 22:07:31
289
转载 CSS主流布局--居中布局（垂直+水平）、两列、三列
主流布局–居中布局（垂直+水平）、两列、三列居中布局的实现方式第一种实现方式：table+margin实现水平方向上的居中，table-cell+vertical-align实现垂直方向上的居中第二种实现方式：absolute+transform实现水平方向和垂直方向上的居中第一种实现方式table+margin实现水平居中，table-cell+vertical-align实现垂直居中...
2020-02-20 13:06:49
1998
1
转载 CSS主流布局--垂直居中布局
常见的布局方式–垂直居中布局垂直居中布局是使得父级元素容器中的子元素保持垂直居中布局的方式常见两种垂直居中布局的方式-table-cell+vertical-align属性配合使用-absolute+transform属性配合使用table-cell+vertical-align属性配合使用HTML<!--父级元素--><div class="parent"&g...
2020-02-19 21:24:05
164
转载 CSS主流布局--水平居中布局
CSS主流布局–水平居中布局水平居中布局当前元素在父级元素容器中，水平方向是居中显示的。水平居中布局实现方式-inline-block+text-align属性配合使用-table+margin 属性配合使用-absolute+transform属性配合使用inline-block+text-align属性配合代码实现：HTML<!--父级容器--><div...
2020-02-19 18:59:51
180
转载 2020年2月12号之javaScript学习笔记（一）
2019年2月12号之javaScript学习笔记JS简介js语言用于网页添加交互性，处理数据以及创建各种应用程序（移动应用程序，桌面应用程序，游戏等），js可用于HTML和web，更可广泛用于服务器，PC，笔记本电脑、平板电脑和智能手机等设备。JS基本特点轻量级编程语言，解释性脚本语言（代码不进行预编译），可以插入HTML页面的编程代码，插入HTML页面后，可由所有的现代浏览器执行，...
2020-02-17 16:23:19
174
转载 2020年2月17号--前端代码规范之HTML
2020年2月17号–前端代码规范之HTMLHTML命名与格式1、W3C建议HTML代码的所有标签名和属性都为小写2、给所有的关键元素定义id和class属性，便于和css、js交互；id名称中的关键词用下划线( _ )连接，class名称中的关键词用( - )连接，根据实际意义和DOM树的层级关系定义合适的名称3、HTML代码层级缩进为4个空格，值为空的元素单独占一行，包含子元素的起始标...
2020-02-17 11:13:29
508
转载 2020年2月18号--HTML5 SVG学习笔记
2020年2月18号–HTML5 SVG学习笔记SVG介绍SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG 圆形要使用 SVG 绘制图形，你首先需要创建一个 <svg> 标签。&...
2020-02-17 10:29:25
189
转载 2020年2月17号--CSS3转换
2020年2月17号–CSS3转换CSS3转换 (transition) 允许我们在限定的时间内从一个属性值转换到另一个属性值。transition-property - 指定要转换的属性transition-duration - 指定转换发生的持续时间transition-timing-function - 指定转换的速度在其持续时间内如何变化transition-delay - 指定...
2020-02-16 11:56:00
182
转载 2020年2月15号--HTML5基础学习笔记（四）
2019年2月15号–HTML5基础学习笔记（四）HTML5简介HTML5 的设计目的是为了在移动设备上支持多媒体。HTML5 还引进了新的功能，可以真正改变用户与文档的交互方式。HTML5 文档在编写 HTML5 文档时，<!doctype> 声明必须位于 HTML5 文档中的第一行:<!DOCTYPE html>字符编码 (字符集) 声明也被简化:...
2020-02-15 16:17:17
153
转载 2020年2月16号--CSS3基础学习笔记（六）
2019年2月16号–CSS3基础学习笔记（六）CSS3简介css3是css的最新标准。重要的新功能：Border radius - 允许我们为元素创建圆角。Border images - 允许我们指定一个图像作为元素周围的边框。Multiple backgrounds - 将多个背景应用于元素。动画(Animations)和特效(effects)，以及更多！前缀CSS圆角...
2020-02-15 15:53:36
109
转载 2020年2月15号--CSS定位与布局学习笔记（五）
2019年2月15号–CSS定位与布局学习笔记（五）display属性display: block网页上的每个元素都是一个盒模型。display属性决定了盒模型的行为方式。 block(块元素)是占用最大可用宽度的元素，前后有换行符。以下示例中的样式规则将内联<span>元素显示为块级元素。<span>First w3cschool.</span>...
2020-02-14 11:00:02
242
转载 2020年2月14号--HTML学习笔记（三）
2019年2月14号–HTML学习笔记（三）HTML <form> 标签表单是一个包含表单元素的区域。 表单元素 是允许用户在表单中输入内容，比如：文本域(textarea) 、下拉列表 、单选框 、复选框 等等。HTML 表单用于收集不同类型的用户输入。HTML <form> 属性HTML 表单常用属性有：action、method、enctype。HTML...
2020-02-13 21:25:57
247
转载 2020年2月13号--HTML基础学习笔记（二）
2019年2月13号–HTML基础学习笔记img元素alt 属性 用来为图像定义一串预备的可替代的文本。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。HTML自定义列表实例： 下面是一个自定义列表。<dl> <dt>苹果</dt> <dd>又大又红&...
2020-02-13 20:20:43
159
转载 2020年2月14号--CSS学习笔记（四）
2019年2月14号–CSS学习笔记CSS属性–背景属性background-color属性background-color属性用于指定元素的背景颜色。background-color的属性值颜色名称关键词：red、blue等；十六进制值：#fff、#000、#6e6e6e等；RGB：rgb(255,255,255)、rgba(0,0,0,0.5)等（使用rgba可以实现透明背景...
2020-02-13 12:17:26
147
转载 2020年2月13号--Ajax学习笔记
2019年2月13号–Ajax学习笔记Ajax工作原理在客户端（如浏览器）和服务器之间加了一个中间层：Ajax 引擎 。由 Ajax 引擎独立向服务器请求数据 ，前端获取到 Ajax 返回的数据 后，可以使用新数据来更新页面 、或进行其它操作 ，使用户请求和服务器响应异步化，从而保证了在不刷新页面的前提下可以局部更新网页内容 。Ajax 使用示例典型应用：按需获取数据，最大限度地减少...
2020-02-12 14:44:58
220
转载 2020年2月13号---CSS盒子模型学习笔记（三）
2019年2月13号—CSS盒子模型认识盒子模型所有的HTML元素 都可以被认为是盒子 。CSS盒模型代表网站的设计和布局。 它由边距(margin) ，边框(border) ，填充(padding) 和实际内容组成 。属性以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom) 和左侧(left)。（便于记忆可以联想时钟行走方向）例如，带有填充(padding) ...
2020-02-12 11:18:02
143
转载 2020年2月13号--CSS文本样式学习笔记（二）
2019年2月13号–CSS文本样式font-family属性此属性值包含多个字体作为备选body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}如果浏览器不支持Arial字体，则会尝试下一个字体（Helvetica Neue，Helvetica）。 如果浏览器没有任何一个，它会尝试通用的sans...
2020-02-12 10:45:02
198
转载 微信小程序之flex布局笔记
微信小程序之flex布局笔记采用flex布局的元素，我们称之为"容器"基本概念：flex是一种灵活的布局模型，使容器能通过改变里面项目的高宽、顺序、来对可用空间实现最佳的填充，方便适配不同的大小的内容区域。（说的比较抽象）**flex不单是一个属性，它包含了一套新的属性集。**属性集分为两类：设置容器、用于设置项目。设置容器的属性：display:flex;flex-directio...
2020-02-11 16:03:35
135
转载 2020年2月12号之CSS学习笔记（一）
2020年2月12号之CSS学习笔记CSS简介CSS是层叠样式表，把CSS添加到HTML4.0中解决了内容与表现分离的问题，是页面变得容易维护内联CSS就是将CSS应用在单个元素中CSS内部样式表在HTML页面的标题部分将内部样式定义在<style>元素中外部引用CSS在HTML页面的<head>中添加<link>标签，将CCS...
2020-02-11 12:04:42
123
转载 2020年2月11号之 HTML基础学习笔记（一）
2020年2月11号之 HTML学习笔记什么是html?它不是编程语言，是一种标记语言，使用标记标签来描述网页，html文档也叫做Web页面，HTML运行在浏览器上，由浏览器来解析HTML页面结构<html>与</html>之间的文本描述网页,<head>与</head>之间的文本描述文档的元数据<title>与</...
2020-02-11 11:05:09
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人