前端小白0-CSDN博客

原创 js函数防抖

场景每次resize/scroll触发统计事件文本输入验证（连续输入文字后发生AJAX请求进行验证，验证一次就好）加载更多函数防抖概念以及原理：函数执行一次过后，在设置好的一段时间内不在执行；如果在等待时间内手动触发该函数，那么将重新计算等待时间。加深概念：坐电梯，众所周知我们进电梯需要等几秒电梯门才会自动关闭，如果在等待这几秒又有人进来了，那么等待的时候就会重新计算，当然排除我们手动关闭电梯的情况代码实现（滚动条滚动案例）<script> var n = 0;

2021-08-30 16:27:25 101

原创 ant.design.vue table心得

创建table的两种方式//第一种方式就是自动生成表格<template><a-table :columns="columns" :dataSource="data" size="middle" /></template><script>const columns = [{ title: 'Name', dataIndex: '...

2019-04-05 21:11:37 18356 2

原创放大镜

放大镜原理放大镜的思想：可以看出来，大图和小图移动的距离是成比例的：小图的宽度/mask移动的距离 = 大图的宽度/大图移动的距离；并且小图和大图移动的方向是相反的，我们能根据根据上面的公式去求出，大图移动的距离，还要求出大图的宽度：大图 = 小图/mask*big; 当然如果能找到图片大小成比例的，也就不用在求大图的宽度了。代码奉上：/*css代码*/<style type="t...

2018-09-20 09:48:52 206

原创无缝轮播

无缝轮播图无缝轮播思想：无缝就是让每两张图片都有一个无缝轮播的效果，1和2、2和3、3和4、4和5、5和1.难实现的是最后一张和第一张的无缝轮播效果，是个效果实现的方法就是克隆第一张图片放在最后面（我们把克隆这张叫做6），在轮播到第6张图示，让图瞬间回到第一张，‘oUl.style.left = 0 + ‘px’;’就是用这句来实现，这样看不出来瞬间的过程，这样就实现了无缝轮播了，话不多说代码奉...

2018-09-18 20:27:14 298

原创轮播图(透明)

轮播图思想轮播图就是只要做出右点击就基本没什么了，透明轮播图当点击下一张时让当前图片透明度变为0，下一张图变为1。话不多说，代码双手奉上：/*HTMl代码*/&lt;div class="box"&gt; &lt;ul class="item"&gt; &lt;li style=&

2018-09-15 16:05:09 1113

原创瀑布流

瀑布流思想瀑布流就是我们放好第一行，从第二行放，就找列的高度最小，就把第二行的第一张放在高度最小的那一列下面，以此类推，接下来放图就根据这个标准，这样是为了我们放的张数越多，保证每一列的高度都相近。哈哈，这是我自己总结的。下面是代码：/*HTML代码*/&amp;lt;div id=&quot;container&quot;&amp;gt; &amp;lt;div class=&qu

2018-09-15 14:53:37 117

原创用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> &a

2018-09-05 19:34:17 16532 4

翻译被忽略的BFC

什么是BFC BFC（Block formatting context）译为“格式快上下文”，是一个独立渲染区域，规定了内部的子元素如何布局，并且与这个区域外部的关系。什么情况下会产生BFC根元素（注意：这里必须手动设置，默认不触发BFC）float属性不为noneposition为absolute或fixeddisplay为inline-block、table-cell、tab...

2018-08-20 08:26:44 230

原创关于背景的CSS声明

背景色background-color:#ff0;背景图片background-image:url(路径);/*网上有两种插入图片的形式：插入图片和背景图插入：属于网页的内容，也就是结构背景：属于网页的表现，背景图上也可以显示文字、插入图片、表格等*//*背景图片的显示原则：容器宽度等于图片尺寸，背景图片正好显示在容器中；容器宽度大于图片尺寸，背景图片将默认平铺，直至铺...

2018-08-18 19:29:02 190

原创列表CSS声明

定义列表符号样式list-style:disc（实心圆）/circle（空心圆）/square（实心方块）/none;使用图片作为列表符号list-style-image:url(路径);定义列表符号位置list-style-position:outside(外)/inside(内);list-style:none;...

2018-08-18 19:09:48 188

原创 CSS属性

文本属性font-size:16px; /*属性为数值时必须加单位，属性值为0时除外。*/1、单位还可以是pt（磅）9pt = 12px、em 1em = 16px 0.75em = 12px 2、16px为标准字体文本颜色用十六进制表示颜色值颜色模式：光色模式 R（FF）G（00）B（00）当表示三原色的三组数值相同时，可以缩写三位加“#”文字字体...

2018-08-18 18:09:46 186

原创 CSS选择器

四大选择器类型（标签、元素）选择器、id选择器、class选择器、特殊选择器。元素选择器：改变元素默认效果、用来统一文档中某个标签的显示效果div{color:red;}id选择器：创建网页的外围结构。用法：使用id选择器时需要给元素定义id属性、在css样式表中写id选择器时，id名前加#、起id名时要用英文，不能用关键字、一个id名称只能对应文档一个具体的元素。#i...

2018-08-18 16:45:16 108

原创新版盒模型Flex

Flex基本概念 flex（Flexinle Box 弹性布局）作用：用来为盒模型提供最大的灵活性。注意：设置了flex布局后当前容器内子元素的float、clear、vertical-align都会失效。 Flex布局的元素称为Flex容器，它所有子元素自动成为容器成员，称为容器项目。容器里面默认存在两根轴：水平的是主轴（main axis）、垂直的是交叉轴（cross axis...

2018-08-12 22:22:45 184

原创 css基础知识1

CSS简介 css（cascading style sheets）层叠样式表作用：用来修饰网页信息的显示样式 div+css优点：缩减页面代码，提高访问速度、结构清晰，有利于seo（推广）。CSS语法选择器{属性:属性值;属性:属性值;}CSS样式表内部样式表&lt;style type = "text/css"&gt;选择器{属性:属性值;属性:属性...

2018-08-12 21:08:00 162

原创 HTML基础知识1

Web标准的概念及组成：web标准：结构（XHTML、XML）、表现（css）、行为（js） *结构和变现都由W3C（万维网联盟）指定、行为是由ECMA（欧洲电脑厂商联合会）制定为标准。 HTML的相关概念 HTML：超文本标记语言（Hyper Text Markup Language） XHTML：可扩展超文本标记语言 HTML5：第五次重大修改 HTML5结构&amp;amp;lt;!doct...

2018-08-12 18:29:06 441 3

TA关注的人

罗小黑