![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
important
水蜜桃那么甜
这个作者很懒,什么都没留下…
展开
-
css实现文字颜色渐变
.fl-left{ float:left; font-size: 46px; font-weight: 500; letter-spacing:4px; background-image:-webkit-linear-gradient(top,rgba(255,255,255,1) 60%, rgba(11,164,230,0.9) 80%); -webkit-background-clip:text; -webkit-text-fill-color.原创 2020-12-04 17:05:45 · 413 阅读 · 0 评论 -
网页中如何使用一些特殊字体
虽然我们可以通过图片,flash、SIFR等技术来实现网页使用特殊字体,有利于SEO网页中嵌入特殊字体方法,@font-face属性。通常网页上不能使用一些特殊字体,否则浏览者可能无法正确浏览到,虽然我们可以通过图片,flash、SIFR等技术来实现网页使用特殊字体,但是这都有个严重的缺点:不利于SEO。下面介绍一种非常有利于SEO的特殊字体应用方法:在CSS中通过@font-face属性来实现网页中嵌入特殊字体。第一步获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体原创 2020-12-03 15:51:05 · 657 阅读 · 0 评论 -
前端三大主流框架的区别
1.angular1.1. 简介:angular是最早出现的框架,angularjs是通过directive(指令)去封装组件,react和vue是通过component。1.2. 优点:1、背后靠山(google),有着稳定的维护团队。且google的Adwords业务就使用了angular,作为一个赚钱的业务,google也会让它的环境更稳定一些。2、angular+typescript,google和微软的双剑合璧。angular全面支持typescript语法,types..转载 2020-09-02 10:13:23 · 2272 阅读 · 0 评论 -
盒子模型,标准盒模型,怪异盒模型,两种盒模型的区别,box-sizing属性
什么是盒子模型CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型(Box Modle)可以用来对元素进行布局,包括实际内容,内边距,边框,外边距这几个部分。盒子模型分为两种:第一种是W3C标准的盒子模型(标准盒模型) 第二种IE标准的盒子模型(怪异盒模型)标准盒模型与怪异盒模型的表现效果的区别之处:1、标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度W3C标准盒模型下盒子的大小 =wid.转载 2020-09-02 09:39:24 · 1872 阅读 · 0 评论 -
修改滚动条样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m.转载 2020-08-07 11:30:55 · 188 阅读 · 0 评论 -
几个css的高级用法
1.calc函数calc可动态设置某个元素的长度html{ font-size:calc(100vw / 8)}.main{ width:100%; height:calc(100vh - 200px)}比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性2.attr函数这个函数用于获取元素的属性的值,我常用于在before等伪类样式中。ul li::转载 2020-08-06 10:41:34 · 352 阅读 · 0 评论 -
如何居中一个元素
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下:这种情形可以有多种实现方式,下面我们详细介绍:一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。//在父容器设置.parent{ text-align:center;}此外,如果块级元素内部包着也是一个块级..转载 2020-08-05 15:45:22 · 201 阅读 · 0 评论 -
http几种请求方式
我们要进行数据的采集,但网站肯定是设置了限制,为了突破这限制,我们需要模拟浏览器访问获取数据,那么首先要了解HTTP的请求,那么在Web中HTTP请求是怎样的呢?HTTP的请求方式有几种?兔子ip今天就为大家带来最可靠的几种请求方式。其实HTTP协议是一个广泛应用的Internet协议,目前常用八种请求方式,分别是GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT,不同请求方法有什么作用呢?接下来跟小编一起去瞧一瞧http的请求方式有几种。1、GET方法转载 2020-08-05 09:35:44 · 476 阅读 · 0 评论 -
测试用例的分类
1,从是否关心软件内部结构和具体实现的角度划分①.白盒测试(针对代码,可以看到实现逻辑)②黑盒测试(页面跳转逻辑)③灰盒测试(接口)2,从是否执行程序的角度①.静态测试(需求评审、用例评审、代码走查)静态方法是指不运行被测程序本身,仅通过分析或检查源程序的语法、结构、过程、接口等来检查程序的正确性。对需求规格说明书、软件设计说明书、源程序做结构分析、流程图分析、符号执行来找错。静态方法通过程序静态特性的分析,找出欠缺和可疑之处,例如不匹配的参数、不适当的循环嵌套和分支嵌套、不允许的递归转载 2020-08-05 09:09:38 · 3975 阅读 · 0 评论 -
节流和防抖的再一次学习
在前端开发中,经常需要绑定一些持续触发的事件,如resize、scroll、mousemove等等,但有些时候并不希望在事件持续触发的过程中那么频繁地去执行函数。此时我们可以用防抖和节流来解决此类问题。防抖(debounce)来看一下防抖的定义:在触发事件后n秒内函数只能执行一次,如果在这n秒内事件又被触发,则重新计算函数执行时间。顾名思义,防止抖动,以免把一次事件误认为多次,比如生活中的敲键盘。防抖的应用场景:.search搜索,用户不断输入值时,用防抖来节约ajax请求,也就是输.转载 2020-07-31 09:49:04 · 166 阅读 · 0 评论 -
WEB前端的优化方案
一般根据雅虎的黄金35定律对Web前端进行优化从网页内容、CSS、JavaScript、图片、服务器端、cookie、移动客户端等方面进行优化。1、网页内容方面:尽量减少 HTTP 请求次数合并文件:合并(js)脚本跟(css) 样式文件,如可以把多个 CSS 文件合成一个,把多个 JS 文件合成一个。 合并图片:CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。 减少DNS查询的次数:DNS查询也会消耗响应时间,对首次访问.转载 2020-07-29 17:03:22 · 305 阅读 · 0 评论 -
JavaScript 获取当前URL信息
示例URLhttp://http://127.0.0.1:8080/testdemo/test.html?id=1&name=test// 返回 web 主机的域名,如:http://127.0.0.1:8080/testdemo/test.html?id=1&name=testvar url = window.location.href;// 返回所使用的 web 协议,如:http:var protocol = window.location.protocol;//转载 2020-07-29 09:40:56 · 151 阅读 · 0 评论 -
http请求
http1、是客服端与服务器传输文本的一种协议2、http协议是无状态的3、http协议默认端口是804、http协议(加密传输)端口是443请求方法1、GET获取信息页面2、POST上传,修改,添加,服务器3、PUT修改4、Delete删除5、head只返回头信息6、trace回显服务器收到的请求,主要用于测试或诊断7、connectHTTP/1.1协议预留能够连接为管道方式的代理服务器请求报文请求报文里面有方法、URL、协议版本、请求头部..转载 2020-07-29 09:32:50 · 252 阅读 · 0 评论 -
element中表格中的表头与表格内容边框错位的解决方法
在app.vue中的style标签内加上body .el-table th.gutter{ display: table-cell!important;}原创 2020-07-21 15:04:45 · 417 阅读 · 0 评论 -
css3中Filter的十种特效
CSS3的filter属性简单且强大,本篇是学习CSS3 Filter所做的笔记。grayscale 灰度, 值为0-1之间的小数;sepia 褐色(我喜欢叫古风滤镜), 值为0-1之间的小数;saturate 饱和度, 值为num;hue-rotate 色相旋转, 值为angle;invert 反色, 值为0-1之间的小数;opacity 透明度, 值为0-1之间的小数;brightness 亮度, 值为0-1之间的小数;contrast 对比度, 值为num;blur 模糊, 值为l转载 2020-07-13 09:43:06 · 213 阅读 · 0 评论 -
前端、程序员面试技巧——完美回答
1、请你自我介绍一下你自己?回答提示:1)先向面试官问好,比如:您好/上午好/下午好,两人以上说各位面试官大家好,我叫XX。2)回答思路:一般人回答这个问题过于平常,只说姓名、年龄、爱好、工作经验,这些在简历上都有,简单介绍即可。 企业最希望知道的是求职者能否胜任公司工作,包括:最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事,主要的成就等,这些都可以和学习无关,也可以和学习有关,但要突出积极的个性和做事的能力,说得合情合理企业才会相信。3)企业很重视一个人的礼貌,求职者要转载 2020-07-11 09:06:18 · 4330 阅读 · 0 评论 -
大厂常问:输入URL到显示页面的全过程(敲详细)
从浏览器地址栏输入 url 到显示页面的步骤基础版本:1 浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求;2 服务器交给后台处理完成后返回数据,浏览器接收⽂件( HTML、JS、CSS 、图象等);3 浏览器对加载到的资源( HTML、JS、CSS 等)进⾏语法解析,建立相应的内部数据结构 (如 HTML 的 DOM);4 载⼊解析到的资源⽂件,渲染页面,完成。详细版:1、在浏览器地址栏输⼊URL2、浏览器查看缓存,如果请求资.转载 2020-07-11 08:53:00 · 4477 阅读 · 0 评论 -
video标签的预加载
预加载媒体文件设置preload属性中的不同属性值,来告诉浏览器应该怎样加载一个媒体文件:auto:表示让浏览器自动下载整个文件none:表示让浏览器不必预先下载文件metadata:表示让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息(比如视频的总时长,第一帧图像等)<video width="400" height="300" controls prel...原创 2020-04-24 16:21:04 · 6948 阅读 · 0 评论 -
Git地址迁移
以前一个码云的仓库有文件,后来项目经理说新建一个企业仓库,然后把那些文件弄到新建的企业仓库里,于是就会有地址迁移的问题。第一步:先在别的地方新建一个文件夹第二步:如果新的仓库里已经有东西了,需要先git clone第三步:新建一个文件夹,用来放文件第四步:git add . git commit -m 'first' git pull git push...原创 2020-04-11 17:30:06 · 189 阅读 · 0 评论 -
纯CSS实现“文本溢出截断省略”的几种方法
单行文本溢出省略核心 CSS 语句overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)white-space: nowrap;(设置文字在一行显示,不能换行)text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)优点兼容性好,对各大主流浏览器有好的支持响应式截断,根据不同宽度做出调整文本溢出范围才显示省略...原创 2020-03-30 15:40:21 · 505 阅读 · 0 评论 -
Markdown基本语法
Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。优点:1、因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作。2、操作简单。比如:WYSIWYG编辑时标记个标题,先选中内容,再点击导航栏的标题按钮,选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即可缺点:1、...原创 2020-03-18 15:23:13 · 122 阅读 · 0 评论 -
vscode使用学习
1 快捷键ctrl+shift+p 打开命令面板移动到行首:home键移动到行尾:end键移动到文档首:ctrl+home键移动到文档尾:cyrl+end键复制单行:alt+shift+上下箭头代码格式化:alt+shift+F批量操作:alt2 插件推荐Project Manager 项目管理Live Server 以服务器的地址打开(移动端...原创 2020-03-18 12:03:38 · 138 阅读 · 0 评论 -
客户端存储方法介绍
介绍三个我们常用的Local Storage特点:只有客户端可以访问 本地永久存储,除非用户从浏览器清除或者使用javascript代码清除,否者不会消失 每个域可以最多存储5MB【个人测试我的chrome版本80.0.3987.132(正式版本)可以存储5.2MB的数据也就是5200000个字节的长度】使用方法:// 保存数据到 sessionStoragelocalS...原创 2020-03-17 14:31:59 · 270 阅读 · 0 评论 -
解决移动端1px边框问题的几种方法
本文介绍了解决移动端1px边框问题的5种方法。当然了,在这之前先整理了与这些方法相关的知识:物理像素、设备独立像素、设备像素比和viewport。物理像素、设备独立像素和设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的。在PC端,C...原创 2020-03-10 09:25:18 · 228 阅读 · 0 评论 -
利用css的content来实现自动在a标签后面加上href属性设置的链接地址
上面是实现效果。下面是html内容。可以看到我并没有写http://www.runoob.com。但是却能显示出来。<a href="http://www.runoob.com" id="a">菜鸟教程</a>那是因为css里面设置了content。#a:after{ content:"("attr(href)")";}...原创 2020-03-09 11:02:39 · 433 阅读 · 0 评论 -
值得看的前端面试文章总结
https://segmentfault.com/a/1190000009780497值得看的前端面试文章- 收藏集 - 掘金https://segmentfault.com/a/119000002030447736 个JS 面试题为你助力金九银十(面试必读)原创 2020-03-09 10:50:15 · 125 阅读 · 0 评论 -
前端调用系统发邮件,打电话
前端调用系统的发邮件<a href="mailto:1336791007@qq.com">到吴迪的邮箱</a>mailto后跟的是收信人可使用参数列表参数 值的意义 to 收信人 subject 主题 cc 抄送 bcc 暗送 body 内容 只需要在href的地址前面加上mailto:即可,后面填...原创 2020-03-05 10:20:09 · 697 阅读 · 0 评论 -
九种跨域方案解决(偏后台)
同源策略:协议、域名和端口号都一致叫同域为什么浏览器不支持跨域呢?cookie localstorage等等不支持跨域 dom元素也有同源策略,比如iframe ajax不支持跨越实现跨域:jsonp cors postMessage document.domain window.name location.hash http-proxy nginx websoc...原创 2020-01-18 09:33:49 · 160 阅读 · 0 评论 -
单元测试
1 什么是单元测试单元测试:对软件中的最小可测试单元进行测试,比如一个方法为什么要用单元测试?分模块开发,方便定位到哪个单元出了问题 保证了代码质量 驱动开发单元测试的类型TDD 测试驱动开发,从需求角度看,即我需要结果是什么,如果不是就是错误的 BDD 行为驱动开发,从具体功能角度看,即结果是什么,如果不是就出错核心内容:测试框架--帮助测试 断言库--断言最后的...原创 2020-01-16 15:05:04 · 191 阅读 · 0 评论 -
面试官常问的web前端问题
1. 标签上 alt与 title属性的区别是什么?alt :搜索引擎识别,在图像无法显示时的替代文本;title :元素注释信息,主要给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。(因为 IE 不标准)在 IE 浏览器中 alt 起到了 title 的作用,变成文字提示。在定义 img 对象时,将 alt 和 title 属性写全,可以保证在各种浏览器中都能正常使用...原创 2020-01-06 11:58:49 · 2251 阅读 · 1 评论 -
GitHub开源的10个超棒后台管理面板
1、AdminLTE简介:非常流行的基于 Bootstrap 3.x 的免费的后台 UI 框架。网站:https://github.com/ColorlibHQ/AdminLTE2、vue-Element-Admin简介:一个基于 vue2.0 和 Element 的控制面板 UI 框架。网站:https://github.com/PanJiaChen/vue-elemen...转载 2019-12-18 16:34:26 · 244 阅读 · 0 评论 -
抓包工具--Fiddler的安装与使用
1 Fiddler的简介Fiddler是位于客户端和服务器端之间的代理,也是目前最常用的抓包工具之一 。它能够记录客户端和服务器之间的所有 请求,可以针对特定的请求,分析请求数据、设置断点、调试web应用、修改请求的数据,甚至可以修改服务器返回的数据,功能非常强大,是web调试的利器.2 Fiddler的下载下载地址:Fiddler的下载地址然后根据下图一步步安装就行。这里的路径也...原创 2019-11-29 14:00:55 · 274 阅读 · 0 评论 -
在vue项目中 如何定义全局变量 全局函数 单个的css文件
定义全局变量第一种方式:全局变量模块文件:global.vueGlobal.vue文件:<script>const serverSrc='www.baidu.com';const token='12345678';const hasEnter=false;const userSite="中国钓鱼岛"; export default{ userSite,//...原创 2019-09-04 17:13:48 · 2138 阅读 · 0 评论 -
ECMAScript5(ES5)标准中扩展的数组Array方法
迭代forEach()forEach()第一个参数是一个回调函数对于数组的每一个元素,它都会执行这个回调函数而且这个回调函数有默认的参数分别是数组元素、数组索引、数组引用数组引用就是数组自身的引用(这个参数顺序与下面的map()、filter()、some()、every()都是一样的)看下面这个例子就明白了['a', 'b', 'c', 'd', 'e'].forEach(con...原创 2019-08-31 14:57:11 · 170 阅读 · 0 评论 -
css3动画特效之字节跳动
代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } bo...原创 2019-09-20 16:55:28 · 560 阅读 · 0 评论 -
ECMAScript6(ES6)标准之对象Object扩展方法及新特性
ES6对于Object也扩增了几个方法不过最重要的是ES6扩展了一些语法比如说允许直接写入变量和函数,作为对象的属性和方法使我们的对象更加简洁下面我就来详细说明一下语法扩展简写对象属性let name = ‘payen’;let obj = {name,age: 19}console.log(obj);//{“name”:“payen”,“age”:19}从这个例...原创 2019-09-03 10:45:14 · 224 阅读 · 0 评论 -
轻量级数据格式——JSON
在很久很久以前,XML是互联网上传输数据的标准但是大家普遍反映XML太繁琐再后来,随着Web的发展人们发现JSON作为JavaScript语法的子集使用更方便于是JSON就成为了标准现在大家都把JSON作为通信的数据格式JSON基本语法JSON:JavaScript Object Notation,JavaScript对象表示法)JSON语法大体分为三种类型值简单类型值:可表示字...原创 2019-09-03 10:27:16 · 327 阅读 · 0 评论 -
HTML5文件读取FileReader及文件读取模块的封装
创建 方法原创 2019-09-03 09:47:35 · 223 阅读 · 0 评论 -
HTML5历史状态管理history API-pushState/replaceState与popstate事件
AJAX技术对我们前端产生了巨大影响可以让我们的页面无刷新操作减少网络请求但是它也产生了一些问题不能够使用浏览器的前进与后退(后退是浏览器非常常用的按钮)很久很久以前,Gmail借助iframe解决了这个问题但现在,HTML5提供了超级简单的APIpushState与onpopstate...原创 2019-09-03 08:52:10 · 245 阅读 · 0 评论 -
HTML5无插件多媒体Media——音频audio与视频video
使用HTML5增加了audio与video两个多媒体标签兼容性还不错,低版本IE不支持可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件而且非常的简单元素用法如下:<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio><video src="media/Anima...原创 2019-09-02 18:00:27 · 396 阅读 · 0 评论