摘要: 使用css让元素不可见的方法有很多种,裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏如果给一个元素设置了display 阅读全文
posted @ 2021-07-27 15:45 陌路y 阅读(121) 评论(0) 推荐(0) 编辑
摘要: 完整css代码如下 filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(10 阅读全文
posted @ 2021-07-27 15:44 陌路y 阅读(237) 评论(0) 推荐(0) 编辑
摘要: 一、js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height',50); el 阅读全文
posted @ 2021-07-27 15:43 陌路y 阅读(324) 评论(0) 推荐(0) 编辑
摘要: preload 可以指明哪些资源在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。 preload 提供的好处主要是: 将加载和执行分离,可不阻塞渲染和 document 的 onlo 阅读全文
posted @ 2021-07-27 15:42 陌路y 阅读(375) 评论(0) 推荐(0) 编辑
摘要: 1.如何将背景图像完美地适合视口 body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&a 阅读全文
posted @ 2021-07-27 15:40 陌路y 阅读(37) 评论(0) 推荐(0) 编辑
摘要: 到底什么是Web开发项目管理? 如今,随着各类Web开发项目变得越来越复杂,它们经常被要求包括可以在不同的平台上运行的跨平台应用程序。同时,这些应用程序也连接着各种数据源,以提取相关的信息,进而予以后期处理。 业界通常认为:大约有56%的项目可以通过适当的人才和出色的管理实践,以轻松地获得成功。因此 阅读全文
posted @ 2021-07-27 15:39 陌路y 阅读(87) 评论(0) 推荐(0) 编辑
摘要: 1响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1. 阅读全文
posted @ 2021-07-27 15:37 陌路y 阅读(67) 评论(0) 推荐(0) 编辑
摘要: 开宗明义,无论是对于一篇文章、一场会议或一部专题片,还是对于一个网站来说,都是必不可少的。那么能为一个网站开宗明义的地方(标签)就是 Title(标题)和Description(描述、副标题),而能够为Title和Description提供进一步诠释的就是网站的首页。 展示哪些信息 页面的重要性是建 阅读全文
posted @ 2021-07-27 15:21 陌路y 阅读(671) 评论(0) 推荐(0) 编辑
摘要: 为什么写这个题目呢? 因为之前写的一个 Node 程序有点小问题,使用的 axios 通过代理请求数据,代理服务器(阿布云)时不时抽风(407、413、503)。 因为第一次写的时候当做一个 DEMO 去实现的,写的挺简陋,只能说大体功能对,但是没有容错机制。 这里我们先算一笔帐啊,一次请求等于 1 阅读全文
posted @ 2021-07-27 15:20 陌路y 阅读(626) 评论(0) 推荐(0) 编辑
摘要: 1.纯CSS Tooltip 许多网站还是在使用JavaScript来创建Tooltip效果,但实际上通过CSS能更简单的实现。最简单的方法是在你的html代码中添加一个带有提示文本的属性,比如。然后你就可以在你的CSS文件中添加以下的代码通过attr()函数来显示提示文字: .tooltip::a 阅读全文
posted @ 2021-07-27 15:19 陌路y 阅读(53) 评论(0) 推荐(0) 编辑
摘要: 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2x2 个像素当 1 个物理像素使用,即使用 2x2 个像素显示原来 1 个物理像素显示的内容,从而让 UI 显示更精致清晰,这 2x2 个像素叫做 阅读全文
posted @ 2021-07-27 15:17 陌路y 阅读(217) 评论(0) 推荐(0) 编辑
摘要: 预备知识 几种常见的模式: SSR: Server-Side Rendering - rendering a client-side or universal app to html on the server. CSR: Client-Side Rendering - rendering an a 阅读全文
posted @ 2021-07-27 15:16 陌路y 阅读(737) 评论(0) 推荐(0) 编辑
摘要: 方法一 html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!-- 可以是整个网站变成灰色的 --> 方法二 html { filter:p 阅读全文
posted @ 2021-07-27 15:14 陌路y 阅读(230) 评论(0) 推荐(0) 编辑
摘要: 前言 XSS大部分前端coder都不会陌生,全称:跨站脚本漏洞(Cross Site Scripting,简写作XSS)是Web应用程序在将数据输出或者展示到网页的时候存在问题,导致攻击者可以将对网站的正常功能造成影响甚至窃取或篡改用户个人信息,其诱发的主要原因是没有针对用户输入来源的数据以及不可信 阅读全文
posted @ 2021-07-27 15:12 陌路y 阅读(731) 评论(0) 推荐(0) 编辑
摘要: 在付出了许多头发的代价之后,终于完成了图片排列,并封装成组件,最终效果如下 一、设计思路 为了使结构清晰,我将图片列表处理成了二维数组,第一维为行,第二维为列 render() { const { className } = this.props; // imgs 为处理后的图片数据,二维数组 co 阅读全文
posted @ 2021-07-27 15:11 陌路y 阅读(94) 评论(0) 推荐(0) 编辑