- 博客(98)
- 收藏
- 关注
RSS订阅原创 纯CSS如何实现移动堆叠卡片行
1 必要CSS基础1.1 CSS伪类:not()：匹配不符合选择器的元素:first-child：选择一组兄弟元素中的第一个子元素:last-child选择一组兄弟元素中的最后一个子元素:hover：鼠标悬浮在元素上方:focus-within：匹配元素自身或者其某个后代匹配:focus伪类1.2 CSS属性transform：对当前元素进行旋转、平移、倾斜及缩放操作，具体请自行查看文档。transition：为当前元素在不同状态之间切换设置过渡效果，具体请自行查看文档。translat
2020-05-12 16:09:04
2108
原创 移动端抓包工具spy-debugger使用
1、npm install spy-debugger -g;2、执行 spy-debugger 命令；图一图二3、将手机和电脑连在同一个局域网；A、IOS设置：连接网络；点击详情—>配置代理—>手动—>输入IP和port（和图二保持一致）；扫描证书二维码安装证书（一定要在设置网络后扫码，否则会出现不想看的画面）二维码地址；安装成功后，打...
2019-12-25 14:29:25
919
原创 vscode中如何将px转rem
在开发h5页面时，我们需要使用到rem单位，那么vscode中如何将px转rem呢？此处我选择的是px to rem插件，使用步骤：安装px to rem插件；然后在设置->用户设置中->扩展中找到**px to rem **或者直接在setting.json中配置： "px-to-rem.px-per-rem": 75, "px-to-rem.numbe...
2019-06-15 11:44:04
20208
5
原创 DIV+CSS有哪些经典布局
DIV+CSS经典布局总结：1 圣杯布局定义：圣杯布局就是常见的三栏式布局——两边等宽，中间⾃适应的三栏布局。实现方式：设置三栏子元素浮动同向（如 float: left; ）；父元素设置左右栏宽度的padding（如 padding: 0 200px; ）；中间自适应宽度设置为width:100%;；设置左边元素margin-left：-100%;，右边元素margin-left...
2019-06-10 19:39:46
6153
原创 flexbox布局详解
flexbox——一维布局模型，由flex-container和flex-item（flex容器）构成，为flex-item（flex元素）之间提供了强大的空间分布和对齐能力。
2019-06-10 16:49:33
832
原创 Module not found: Can't resolve '@babel/runtime/helpers/esm/extends' in '..node_modules\history\esm'
react安装依赖后报错：Module not found: Can't resolve '@babel/runtime/helpers/esm/extends' in 'D:\HIKV\APP_components\saas_face_demo\branches\v1.0.1\node_modules\history\esm'暂时解决方法：将 import _extends from ...
2019-04-03 19:53:10
7072
转载 CSS单位总结
CSS中，单位分为两类绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的；相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。注意：此处的相对指当前元素的字号（font-size）或者视口（viewport）尺寸。绝对单位有：单位简介px像素 (计算机屏幕上的一个点)，1px = 1/96inpt磅 (Points) ，1 pt ...
2018-11-27 16:48:07
480
原创 canvas中绘制文本
canvas提供两种文本渲染方式：fillText(text,x,y[,maxWidth]); // 在指定的（x,y）处填充文本，绘制的最大宽度是可选的strokeText(text,x,y[,maxWidth]); // 在指定的（x,y）处绘制文本边框，绘制的最大宽度是可选的属性：font = value; // 当前绘制文本的样式，和使用css中font属性相同，默认是"10px...
2018-10-30 11:02:48
922
原创 canvas样式和颜色
color（颜色）fillStyle = color; // 设置图形的填充颜色stokeStyle = color; // 设置图形的轮廓颜色transparency（透明度）line styles（线型）gradient（渐变）patterns（图案样式）shadows（阴影）canvas填充规则...
2018-10-25 20:35:32
18459
原创 canvas绘图形状总结
矩形rect(x,y,width,height) // 创建矩形fillRect(x,y,width,height); //创建填充的矩形strokeRect(x,y,width,height); // 创建轮廓矩形clearRect(x,y,width,height); //清除指定区域矩形,使其完全透明路径beginPath() // 起始一条路径或者重置当前...
2018-10-24 19:43:11
1646
转载 浏览器渲染原理及解剖浏览器内部工作原理
一、浏览器如何工作简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么工作的：用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；浏览器开始载入html代...
2018-10-17 14:07:31
483
原创 chrome浏览器上传图片卡死的解决方法
最近用chrome浏览器上传图片时，总是卡死，不管是自己的程序，还是别人家的网站，都卡死。只有卸载重装之后才可以上传，但是电脑关机重启后，chrome浏览器必须重装才行，找了很久，没找到解决方法，始终重装浏览器总是不行的。晚饭后随便翻翻，发现了一种解决方法：说只搜狗输入法的锅，切换输入法后就行，也没有报太大的希望，就抱着试试的心态测试了下，还真的解决了。。。。。。。。此处mark下，希望能...
2018-10-09 19:54:44
5207
2
原创 vue-cli升级采坑记
想用vue3.0创建项目，然后参考https://cli.vuejs.org/guide/installation.html，然后按照文档操作。 1、卸载之前安装的vue-clinpm uninstall vue-cli -g2、然后安装新的vue-clinpm install -g @vue/cli或者是直接使用vue create project_name创建项目，如...
2018-09-03 19:21:45
1524
原创 CSS3之沿环形路径移动
实现环形路径移动，我们主要利用以下两个属性：animation-originrotate(1turn)通用CSS样式：.round{ width: 200px; height: 200px; border-radius: 100%; background: lightpink; padding: 20px;}.move{ d...
2018-08-16 20:42:53
5454
原创 tab-size属性
tab-size 自定义制表符的宽度。通常我们使用pre来展示，比如我们要展示带格式的代码块，pre标签是我们最好的选择，但是在浏览器展示中，tab相当于8个字符，这个就很头疼了，所以展示只能避开tab键了，那么，有更好的方法解决这个问题吗？ 有的，tab-size完美的解决了这个问题，那详细看下这个属性：默认值：8具有继承性值：1、可以为具体的数字（制表符对应的空格数）2、...
2018-08-06 17:18:11
1163
原创 CSS中的斑马条纹
表格中的斑马条纹表格中的斑马条纹很容易实现 你可以使用nth-child来实现：tr:nth-child(even){ background: #E9E9E9;}也可以使用nth-of-type来实现：tr:nth-of-type(even){ background: #E9E9E9;}文本中的斑马条纹那么我们如何实现一段文本行中的斑马条纹效果呢？...
2018-08-03 14:44:22
4091
原创 CSS3之hyphens（连字符）
1，连字符连字符分为硬连字符和软连字符：硬连‐字符：，即使该单词没有中间换行，也会显示连字符软连字符：­，只有单词中间换行才显示连字符2，hyphens属性CSS3了提供hyphens属性指定文字多行自动换速行应断字既可以在中的相关资料：软使用连字符指定换速行点，也可以由浏览器在适当的位置插入换行符。属性值：可以加前缀-webkit-状...
2018-08-03 11:15:18
8358
4
原创 CSS之mask实现方法汇总
在前端中，我们经常要实现遮罩层，来弱化后面的一切整体，从而突出显示某些特定的元素，比如我们的弹窗，那么mask（遮罩层）有多少种方法可以实现呢？<body> <div class="mask"></div> <div class="dialog"&
2018-08-02 14:48:23
5796
转载 在浏览器的标签页显示网站标志图标（或指定图标）的方法
如下图： 对于不同的浏览器，方法是有差别的 1.对于IE或TT浏览器：把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下，浏览器会自动检索 2.这大概是所有浏览器通用的在标签页加入指定图标的方法： 把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入<link rel="shortcu...
2018-07-24 15:15:52
1211
原创 清除Chrome浏览器下默认浅黄色背景（保存密码时出现）
当某个登录的页面我们保存密码之后，后面登录账户名和密码会自动填充，我们可以观察到，Chrome浏览器自动加了一层淡黄色的背景，如下图： 那么我们改如何清除默认的样式呢？首先我们看到它默认的代码如下： 看到这个，是不是马上想到如下代码：input:-webkit-autofill{ background:#fff!important; //这里可以是你想要的任何颜色}...
2018-07-11 17:29:22
2343
原创 vue中使用jQuery
1、安装jQuerynpm install jquery --save2、配置build/webpack.base.conf.js引入webpack：var webpack = require('webpack')增加plugins：plugins: [ new webpack.ProvidePlugin({ $:"jquery"...
2018-07-04 17:24:25
3131
原创 canvas实现分散对齐
canvas水平对齐方式有： 值 描述 start 默认，文本在指定的位置开始 end 文本在指定的位置结束 center 文本的中心被放置在指定的位置 left 文本左对齐 right 文本右对齐JS调用：ctx.textAlign = "center | end | left | right | s...
2018-05-24 19:04:18
1673
原创 CSS中clip-path属性
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。例如：circle()等。 clip-path已经代替了现在已经弃用的剪切clip属性。初始值：none使用元素：所有元素，在SVG中，适用于不包括defs元素和所有图形元素的容器元素继承性：否语...
2018-05-15 18:56:19
1482
原创 box-shadow学习笔记整理
box-shadow不用多说，大家都知道是给元素设置阴影的，但是使用过程中有很多有意思的技巧。定义box-shadow是以逗号分隔列表来描述一个或者多个阴影效果。同时如果设置了border-radius，阴影同样对圆角生效。如果同时设置了多个阴影，那么第一个在最上面，以此类推。初始值：none适用于所有元素，包括伪类继承性：无语法box-shadow：inset...
2018-05-15 16:10:03
313
原创 width/height新视界
众所周知,width height是用来指定元素的宽度和高度的，可能我们平时用到具体的<length> 和<percentage> 比较多，那他们还有其他的值吗？如果我们根据内容的宽度来决定元素的宽度（随着内容自适应）该如何做呢？我们以最小或者最大的元素内的内容的宽度或者高度来决定元素的宽高该如何实现呢？CSS3给我们提供了好方法，具体是什么方法呢？值wid...
2018-05-11 14:57:01
919
原创 radial-gradient()的前世今生
1、radial-gradient() 原理CSS radial-gradient()函数创建一个由原点（渐变中心）辐射开的颜色渐变的图片，边缘形状只能为为circle或者ellipse，其结果属于<gradient>数据类型，是一种特别的<image>数据类型。 径向渐变（radial-gradient）由其中心点、边缘形状轮廓及位置、色值的结束点（color-...
2018-05-10 14:37:42
6500
原创 利用linear-gradient来实现信封边框效果
还是利用渐变来实现的，我们废话不多说，直接上代码：width: 200px;height: 80px;border-color: transparent;background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0,red 12.5%,tra...
2018-05-09 17:57:18
1495
原创 CSS之伪随机背景
前面文章中有说到渐变实现条形背景，如下：div{ width: 600px; height: 200px;}.grad-03{ background: linear-gradient(90deg,orange 15%,yellowgreen 0,yellowgreen 40%,brown 0, brown 65%,transparent 0),pink; ...
2018-05-09 17:22:27
995
原创 利用渐变实现多种几何图案
把多个渐变叠加起来会发生什么事呢？div{ width: 200px; height: 200px; border-radius: 100%; border: 8px solid rgba(255,255,255,0.6); background-clip: border-box;}例1background: #fff;backgroun...
2018-05-09 15:09:08
956
原创 利用纯CSS实现条纹背景
原理： 如果多个色标具有相同的位置，他们会产生一个无限小的过渡区域，从效果上看，颜色会从这个位置突然变化，而不是一个平滑的过程。 linear-gradient() 函数用于创建一个表示两种或者多种颜色线性渐变的图片。其结果属于&amp;amp;lt;gradient&amp;amp;gt;数据类型，是一种特别的&amp;amp;lt;image&amp;amp;gt;数据类型，因此我们可以通过background-size来控制渐变的大
2018-05-08 18:05:44
8265
1
原创 linear-gradient()的神秘面纱
CSS linear-gradient() 函数用于创建一个表示两种或者多种颜色线性渐变的图片。其结果属于&amp;lt;gradient&amp;gt;数据类型，是一种特别的&amp;lt;image&amp;gt;数据类型。一、线性渐变的构成1、利用PS理解渐变的原理我们先看看PS上的渐变，简单了解下渐变的原理： 如图所示，下面总共六个色块，代表了渐变的六种颜色，位置分别为0%、20%、40%、60%、...
2018-05-08 16:21:41
349
原创 如何实现边框内圆角
实现效果如下： 对于上述效果，我们可以用两个嵌套的div实现，如下：<div class="test-wrap"> <div></div></div>div{ width: 180px; height: 100px;}.test-wrap{ background: red; padding:...
2018-05-08 10:53:48
3008
转载 CSS3 calc()是怎么实现计算
css3的calc()函数允许我们在属性值中执行数学计算操作。例如，我们可以使用calc()指定一个元素宽度的固定像素值为多个数值的和。calc(表达式) - 表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、rem、em等）； - 表达式中有”+”、”-“运算符的，前后必须要有空格，这个是向前兼容，后期可能会带入变量等有”-“连字符； - 虽然“*”“/”没有空格...
2018-05-07 16:32:52
8357
1
原创 CSS实现多重边框
想到多重边框，我们可能会通过多个元素来模拟实现，但是如何在一个元素上实现多重边框呢？如下图： 1、box-shadow我们可以通过box-shadow来实现。 box-shadow： h-shadow v-shadow blur spread color inset | outset； 分别是：水平阴影位置 垂直阴影位置 模糊距离 扩张半径 颜色 内部阴影或者外部阴影 实现多重边框...
2018-05-07 14:59:07
3213
原创 CSS自定义属性学习笔记
找了很久关于–accent-color的资料，但是没有找到，以下完全是个人理解，如果有错误，请大家在评论区指正，非常感谢。–accent-color css中的变量，类似于currentColor，currentColor只是指当前元素的color颜色的值，但是–accent-color 是指定其值，更像是一个变量名，它可以指定属性后面任何值，可以是颜色，可以是具体像素值，可以给任何一个属性给...
2018-05-07 14:19:52
1411
2
原创 background简写
background是一个简写属性 background: color image position/size repeat origin clip attachment initial | inherit;它的展开式属性为：background-color/*背景颜色（CSS1）*/background-image/*背景图片（CSS1）*/background-position/...
2018-05-07 10:35:24
5608
原创 AI中的对齐方式
AI中的对齐方式图形对齐锚点对齐视图参考线对齐借助图形图形对齐分为对象对齐和分布对齐，均分为水平和垂直对齐。居中方式有： - 左对齐：以最左边的为基准对齐； - 右对齐：以最右边的为基准对齐； - 居中对齐：从最左边和最右边的图形中找到中间点进行居中对齐；锚点对齐比如绘制折线、射线组和水滴都很方便视图参考线对齐方法一：Ctrl+’或者（视图...
2018-04-26 14:13:39
10000
原创 纯CSS制作旋转的太极图
效果如下： html<div class="universe-wrap"> <div class="universe"> <div></div> <div></div> </div></div&
2018-02-23 15:46:58
1122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人