前端
关注
分享
扫一扫
文章平均质量分 52
好事总会发生在下个转弯
努力搬砖中。。。
展开
-
div之间出现间隙的原因与解决方案
div之间存在间隙 div之间为什么会存在间隙原创 2022-07-04 22:09:53 · 6150 阅读 · 1 评论 -
HTTP响应状态码详解
一、响应状态分类100-199 信息响应200-299 成功响应300-399 重定向消息400-499 客户端错误响应500-599 服务端错误响应二、信息响应状态码状态信息含义100Continue（继续）此临时响应指示客户端应继续请求或如果请求已完成则忽略响应101Switching Protocols（交换协议）该代码是为了响应Upgrade来自客户端的请求头而发送的，并指示服务器正在切换到的协议102Processing（处理）此代码原创 2022-01-06 13:12:31 · 1959 阅读 · 1 评论 -
vue-cli脚手架中如何查看具体的webpack配置
在Vue脚手架中隐藏了所有的webpack相关配置，如果想要查看具体的webpack配置，可以使用如下命令行：vue inspect > output.js详细请参照：https://cli.vuejs.org/zh/guide/webpack.html#%E5%AE%A1%E6%9F%A5%E9%A1%B9%E7%9B%AE%E7%9A%84-webpack-%E9%85%8D%E7%BD%AE...原创 2021-12-06 14:38:17 · 1886 阅读 · 0 评论 -
vscode中如何快速生成用户代码片段
一、使用理由在相关的项目开发中，我们会发现很多页面中都需要用到相同的代码，如果我们都是手动去敲写重复的代码，会显得异常麻烦，同时会浪费掉很多的时间。此时我们就可以使用vscode中的用户代码片段来通过自定义的简写方式来生成重复的代码片段，这样可以帮助我们解决很多的时间。二、使用方式1、选中管理中的用户代码片段2、新建相关的代码片段，在所新建的代码片段中可以选择自己相对而言比较适合的范围3、输入相关的名字后进行相关代码的编辑4、最终实现效果回车后直接生成如下内容三、用户代码片段编原创 2021-12-01 13:36:57 · 812 阅读 · 0 评论 -
el-table 文字超过规定表格单元格大小显示省略号，鼠标悬浮到相关单元格上出现相关的文字提示
具体代码<el-table v-loading="loading" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" tooltip-effect="dark" ref="multipleTable" stripe @row-click="rowClick" :data="tableList" height="calc(100vh - 310px)">原创 2021-08-03 14:12:19 · 989 阅读 · 0 评论 -
修改滚动条样式
具体代码/*滚动条的宽度 */::-webkit-scrollbar { width: 6px; height: 6px;}/*定义滚动条轨道*/::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}/* 滚动条的滑块 */::-we原创 2021-07-19 10:45:37 · 97 阅读 · 0 评论 -
JS返回数组对象中满足相关对象条件的下标
一、方法 Array.findIndex()findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。findIndex()方法为数组中的每个元素都调用一个函数执行。当数组中的元素在测试条件时返回true时，findIndex()返回符合条件的元素的索引位置，之后的值就不会再调用执行函数。如果没有符合条件的元素就返回-1。注意：findIndex()对于空数组，函数是不会执行的。findIndex()并没有改变数组的原始值。二、Array.findIndex()原创 2021-07-19 10:15:03 · 7856 阅读 · 0 评论 -
Vue中封装使用防抖函数
一、封装防抖函数debounce(fn, time) { let timer = null; return function(...args) { let _this = this; if(timer) { clearTimeout(timer); } timerv = setTimeout(() => { fn.apply(_this, args); }, time) }}二、在函数中进行调用this.debounce(() => { cons原创 2021-07-19 09:42:29 · 2374 阅读 · 0 评论 -
前端工程中常见的HTTP状态码
200 表示请求后端接口成功400 表示前端所传递给后端的参数错误404 未找到相关的接口信息，即请求的资源（网页）不存在500 内部服务器错误，后端逻辑或代码错误特殊的：如果在请求接口时出现pending，表示后端正在排查错误，即后端在相关的接口处打了断点。这是我目前在开发中所常见到状态码信息，如果还有另外一些比较常见的HTTP状态码，欢迎交流。...原创 2021-07-01 10:56:40 · 167 阅读 · 0 评论 -
JS 二维数组转变成一维数组
实现代码如下所示var twoArray = [["a", "b", "c"], ["d", "e", "f"]];// 使用apply()使其所指的对象为一维数组，然后通过twoArray来传递相关的参数var oneArray = [].concat.apply([], twoArray);// reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值// 语法：array.reduce(function(total, currentValue, cur原创 2021-05-09 21:49:09 · 1151 阅读 · 0 评论 -
使用动态组件实现多标签
一、实现效果二、相关代码详情<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态组件</title> <style> div { width: 250px; } .tab-button {原创 2021-05-09 17:48:30 · 126 阅读 · 0 评论 -
Vue自定义指令实现随机背景色
1、实现的具体效果演示2、具体功能实现的相关代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>随机背景颜色</title> <style> div { margin: auto; width: 567px原创 2021-05-01 16:22:57 · 979 阅读 · 0 评论 -
Vue实现下拉菜单
1、所实现的具体功能效果2、具体功能实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> body { width: 600px; }原创 2021-05-01 15:56:50 · 3070 阅读 · 0 评论 -
如何使用浏览器端的开发者工具调试代码
1、相关示例代码如下所示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-05-01 10:42:17 · 624 阅读 · 0 评论 -
使用lodash来完成深拷贝和浅拷贝
1、lodash的简介lodash是一个一致性、模块化、高性能的JavaScript实用工具库。lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得更简单。2、lodash的相关使用参见lodash的相关中文文档：https://www.lodashjs.com/3、lodash相关深拷贝参见：https://www.lodashjs.com/docs/lodash.cloneDeep4、cdn引入lodash.js的相关网站参原创 2021-04-18 10:12:47 · 1004 阅读 · 0 评论 -
JavaScript中数组去重方法
var res_arr = function(arr) { return arr.filter(function(ele, index) { return arr.indexof(ele) == index; })代码解释：arr表示所传递过来的数组。数组中的filter()方法用于创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。而ele表示当前元素的值，index表示当前元素的索引值。数组中的indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置原创 2021-04-04 15:53:40 · 73 阅读 · 0 评论 -
SASS的扩展库Compass
一、Compass简洁Compass是一个基于SASS的类库，它帮助了我们预定义好了很多常用的Mixin和Function。Compass的组成模块：CSS3：将CSS3的带有属性前缀的兼容代码组合成Mixin。Reset：用于清除浏览器自带样式，保证不同浏览器下显示的一致性。Utilities：对一些常用的CSS样式进行简化。Helpers：提供一些常用的函数。Layout：提供栅格系统和一些简单的布局样式。二、CSS3模块Compass的CSS3模块实际就是将开发中经常用到的CSS原创 2021-04-04 09:25:10 · 286 阅读 · 1 评论 -
VSCode自动编译scss文件
1、在扩展库中下载sass和easy sass。2、打开文件→首选项→设置→settings.json文件，然后在文件中添加如下语句。原创 2021-04-04 08:29:30 · 1359 阅读 · 0 评论 -
Sass
一、Sass简介Sass是采用Ruby语言编写的一款CSS预处理语言，是最早的CSS预处理语言。最初它是配合HAML（一种缩进式HTML预编译器）而设计的，因此有着和HTML一样的缩进风格。虽然缩进式代码风格可以有效缩减代码量，强制规范编码风格，但是它一方面并不为大多数程序员接收，另一方面无法兼容已有的CSS代码。Sass从第三代开始，放弃了缩进式的风格，并且完全向下兼容普通的CSS代码，这一代Sass也被称为SCSS。二、Sass安装与使用1、安装Ruby。2、Ruby安装完成后，使用gem系原创 2021-04-03 21:55:51 · 110 阅读 · 0 评论 -
Less
一、Less简介1、Less是使用JavaScript语言编写的一种CSS预处理语言，它为CSS赋予了编程语言的特征，如变量、继承、运算、函数等。2、Less既可以在客户端上运行，也可以借助Node.js或Rhino在服务端运行。3、编译好的Less文件只有编译为CSS文件后才能被浏览器识别。较为流行的Less编译工具：Koala，全平台的Less/Sass编译工具，下载地址：http://koala-app.com/index-zh.html。Codekit，MAC下自动编译Less/Sas原创 2021-04-03 20:37:19 · 291 阅读 · 0 评论 -
VSCode实现预编译less文件
1、在扩展中搜索less，找到Easy Less后进行安装重启。2、找到文件-》首选项-》设置后3、打开settings.json后进行编辑添加如下内容"less.compile": { "compress": false,//是否压缩 "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数 "out": true, // 是否输出css文件，false为不输出 "outExt": ".css", // 输出文件原创 2021-04-03 17:14:09 · 341 阅读 · 0 评论 -
VSCode中使用less本地报语法错误
一、相关错误截图二、解决方案1、在VSCode的右下角查看所使用的语言模式2、发现其所使用的语言模式为HTML，点击该语法然后将其修改为vue的语言模式3、修改后其最终结果如下所示问题终于解决啦~~。（希望以上的解决方案能够帮助到大家）...原创 2021-04-03 16:45:50 · 2701 阅读 · 3 评论 -
CSS的缺陷
一、总体缺陷概括CSS文件中常常充斥着大量重复的定义，不但编写时很难组织，代码量庞大，而且随着项目规模的扩大，维护会越来越困难。二、具体缺陷1、无法定义变量一些很常用的属性值无法将其赋值给变量，然后进行调用变量来进行使用。2、重复代码CSS的继承机制是根据HTML的层级关系来决定的，如果HTML文档中存在父子元素的关系，那么子元素可以继承父元素的部分属性，而没有父子关系的则不能进行继承。在很多情况下，几个元素拥有类似的定义，却没有父子关系，此时不得不定义大量重复的代码。3、计算问题CSS没有原创 2021-04-03 15:20:06 · 928 阅读 · 0 评论 -
CSS 注意点（容易忽略的地方）
一、列表样式1、list-style-type属性是针对ol或者ul元素的，而不是li元素。2、对于将列表项符号替换成一张图片的操作，在真正的开发项目中，一般情况下都不会使用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现。二、表格样式1、若要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果一样。一般情况下，在table元素中定义就可以了。2、在CSS中，border-collapse属性也是在t原创 2021-03-27 00:47:15 · 151 阅读 · 0 评论 -
CSS 文本样式
1、字体样式和文本样式的区别：1、字体样式针对的是“文字本身”的形体效果。文本样式针对的是“整个段落”的排版效果。2、字体样式注重个体，文本样式注重整体。2、在CSS中如何大致上对字体样式和文本样式进行区分？可以通过相关的属性前缀的"font"和"text"来大致对字体样式和文本样式进行区分。3、文本样式属性文本样式的属性属性说明text-indent首行缩进text-align水平对齐text-decoration文本修饰text-transfor原创 2021-03-26 23:39:04 · 155 阅读 · 0 评论 -
字体风格font-style
1、相关功能在css中，可以使用font-style属性来定义斜体效果。2、语法font-style: 取值;3、font-style属性的取值font-style属性取值属性值说明normal正常（默认值）italic斜体oblique斜体对于italic和oblique斜体属性值的理解：有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。...原创 2021-03-26 23:13:06 · 939 阅读 · 0 评论 -
background-color和color的区别
1、功能不同background-color用于设置背景颜色，而color用于设置字体的颜色。2、范围不同background-color属性所设置的颜色会填充元素的内容、内边距和边框区域，扩展到边框的外边界（不包括外边距）。color属性设置了一个元素的前景色，在HTML中就是元素的文本颜色。光栅图像不受color影响。这个颜色可以应用到元素的所有边框，但是当设置了border-color的颜色时，其将显示所设置的border-color属性的颜色。即border-color所设置的颜色会覆盖co原创 2021-03-26 21:58:06 · 3274 阅读 · 0 评论 -
css盒子模型中的background-color能控制的颜色范围
css盒子模型中的background-color能控制的盒子模型内的content、padding和border中的颜色。当将border中的颜色设置为transparent，即透明时，border所呈现的颜色就是background-color属性中所定义的颜色。当border中的border-color属性不是transparent时，border中的颜色即以其所设置的颜色进行呈现，覆盖掉background-color中的颜色。...原创 2021-03-26 20:33:07 · 1542 阅读 · 0 评论 -
在CSS中top、left、right和bottom属性设置无效果
top、left、right和bottom属性设置没有作用的原因position属性一般配合top、buttom、left和right来使用。元素只有在定义position属性（除了static）之后，top、buttom、left和right才有效。注意：position属性的值为static时，设置top、buttom、left和right属性时不会产生任何效果。同时position的默认属性为static，即在不设置position属性的情况下，position的值为static。...原创 2021-03-26 19:18:10 · 2236 阅读 · 0 评论 -
HTML超链接
超链接一、a标签二、target属性三、内部链接四、锚点链接一、a标签在HTML中，可以使用a标签来实现超链接。相关语法：<a href = "链接地址”>文本或图片</a>href表示想要跳转的那个页面路径，即相关地址，可以是相对路径，可以是绝对路径。超链接的使用范围非常广，可以将文本设置成超链接，即“文本超链接”；也可以将图片设置成超链接，即“图片超链接”。二、target属性在HTML中可以使用target属性来定义超链接打开窗口的方式。相关语法为：<原创 2021-03-17 23:09:11 · 329 阅读 · 0 评论 -
HTML图片
图片一、图片标签1、src属性2、alt属性和title属性二、图片路径1、绝对路径2、相对路径一、图片标签在HTML中，可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。相关的语法：<img src = "" alt = "" title = ""/>1、src属性src用于指定这张图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。相关语法：<img src = "图片路径" />“图片路径”指的是图原创 2021-03-17 22:37:47 · 305 阅读 · 0 评论 -
HTML表格
表格一、基本结构二、完整结构1、表格标题：caption2、表头单元格：th三、语义化四、合并行：rowspan五、合并列：colspan一、基本结构在HTML中，一个表格一般由以下3部分组成：表格：table标签行：tr标签单元格：td标签说明：tr指的是table row（表格行）。td指的是table data cell（表格单元格）。<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，原创 2021-03-17 12:10:58 · 555 阅读 · 0 评论 -
HTML列表
列表一、有序列表1、简介2、type属性二、无序列表1、简介2、type属性3、注意点三、定义列表一、有序列表1、简介在HTML中，有序列表中各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束。在有序列表中一般采用数字或字母作为顺序，默认采用数字顺序。在语法中，<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。注意：ol标签和li标签需要配原创 2021-03-17 11:48:13 · 171 阅读 · 0 评论 -
HTML文本
文本一、标题标签二、段落标签三、换行标签<br/>四、文本标签1、粗体标签2、斜体标签3、上标标签4、下标标签5、中划线标签6、下划线标签7、大字号标签和小字号标签8、总结五、水平线标签六、div标签七、自闭合标签八、块元素和行内元素1、块元素2、行内元素九、特殊符号1、网页中的空格2、网页中的特殊符号一、标题标签在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写，6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重原创 2021-03-17 11:20:48 · 1505 阅读 · 0 评论 -
基本标签
基本标签一、HTML结构1、文档声明2、HTML标签3、head标签4、body标签二、head标签1、title标签2、meta标签（1）name属性（2）http-equiv属性3、link标签4、style标签5、script标签6、base标签三、HTML注释一、HTML结构HTML的基本结构：文档声明：<!DOCTYPE html>html标签对：<html></html>head标签对：<head></head>body标原创 2021-03-16 22:31:40 · 155 阅读 · 0 评论 -
流式布局
一、计算百分比对于流式布局来说，我们可以通过直接定义模块和模块间距百分比的方式来实现，不过和固定布局一样，对于复杂页面来说，把工作交给更规范、更便捷的栅格系统时更好的选择。和固定布局不同的是，流式布局无须考虑container的宽度选择，在栅格计算上，直接将container的宽度值设为100%进行计算，计算方法则和固定栅格是一致的。二、使图片更加灵活在流式布局中，我们为了让图片的大小能够随着窗口的大小的变化而变化，我们可以为图片元素添加max-width: 100%;和height: auto;属性原创 2021-03-14 20:19:00 · 324 阅读 · 1 评论 -
固定布局
一、概念固定布局就是指各个部分都采用固定宽度的页面布局，如果缩放页面到窗口宽度小于页面宽度时，就会导致本部分内容不可见，必须通过滚动条的拖动才可以浏览全部内容。二、定义列宽一个固定列宽的栅格系统主要由3个部分组成：列（Column）、槽（Gutter）、外边距（Margin）。列的宽度决定了容器内部的宽度，槽的宽度决定了列与列之间的固定间距，外边距则表示container边界和实际内容之间的间距。要构建栅格系统，首先要确定container的宽度和列数。三、运用CSS实现固定列宽的栅格固定列宽的原创 2021-03-14 11:03:22 · 761 阅读 · 0 评论 -
CSS3常用工具
一、使用Prefix free处理CSS3跨浏览器兼容使用prefixfree后在项目中写CSS时就不再需要写那么多冗长的带有属性前缀的CSS3定义了。Prefix free相关用法：1、下载prefixfree.js文件后放在项目中直接进行引用即可。2、使用Github提供的远程链接进行引用。示例：<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>二、应用No原创 2021-03-07 16:23:19 · 153 阅读 · 0 评论 -
CSS3之弹性盒子
一、弹性盒子简介在进行相关的页面布局时，可以使用table布局，自适应性很好，但是灵活性、语义性都不好，代码量偏大；当使用绝对定位时，自适应性又不太好；使用浮动的话，中间的主要内容会被最后加载，用户体验存在问题。弹性盒子可以灵活的进行页面布局，而且除了兼容性问题外，弹性盒子相比其他任何一种方法都更简单易用，更容易理解。二、弹性盒子的语法弹性盒子的基本语法非常简单，首先需要对父元素进行一个声明：.father { display: box;}有了这个声明，才能证明父元素的空间是可以被子元素分原创 2021-03-07 14:45:46 · 300 阅读 · 2 评论 -
媒介查询和响应式设计
一、媒介类型（各种浏览器终端）这里的媒介指我们浏览内容所使用的各种电子设备。在CSS2标准中就可以根据不同的媒介类型来设置不同的输出样式，@media规则使开发者有能力在相同的样式表中，针对不同的媒介来使用不同的样式规则。示例：<style> @media screen { p.test { font-family: verdana, sans-serif; font-size: 14px; }原创 2021-03-07 12:19:51 · 164 阅读 · 0 评论