摘要：
1、在不同设备上采用相似的设计 用户可以通过不同类型的设备访问你的网站，这些设备包括：电脑、平板、手机、音乐播放器、甚至是智能手表等。无论用户使用什么设备访问你的网页，确保他们具有类似的体验，这是用户体验设计中的一条重要标准。 2、导航的设计要简单易用、清晰明了 导航设计是网页可用性的基石。记住，如 阅读全文
posted @ 2020-07-17 23:37
前端一点红
阅读(596)
评论(0)
推荐(0)
摘要：
1、localStorage 一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。注：两个页面要同源（URL的协议、域名和端口相同） // 本窗口的设值代码 localStorage.setItem('aaa', (Math.random()*1 阅读全文
posted @ 2020-07-17 23:34
前端一点红
阅读(1068)
评论(0)
推荐(0)
摘要：
有时候，我们需要使页面内容不可选择。首先想到的是一个css属性：user-select。user-select有两个值： none：用户不能选择文本 text：用户可以选择文本 禁用选择代码实现 html: <p>你可以选择我。</p> <p class="noselect">你不能选择我！</p> 阅读全文
posted @ 2020-07-17 23:27
前端一点红
阅读(1761)
评论(0)
推荐(0)
摘要：
创建一个没有背景的圆，然后声明透明度为0.1的黑色边框(看起来是灰色)，修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画，并让该动画无限播放(infinite)即可。 使用的css3 特性: transform属性的 rotate，共一个 阅读全文
posted @ 2020-07-17 23:23
前端一点红
阅读(1036)
评论(0)
推荐(0)
摘要：
Visual Studio Code Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增php语法高亮。 Atom ATOM，是一个现代的文本编辑 阅读全文
posted @ 2020-07-17 23:18
前端一点红
阅读(873)
评论(0)
推荐(0)
摘要：
在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的css动画简直是绝配。于是我便打算深入地研究一下，看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样，好的游戏拥有许多细致的动画细节。有一天夜里，我的脑海中突 阅读全文
posted @ 2020-07-17 23:17
前端一点红
阅读(1265)
评论(0)
推荐(0)
摘要：
这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。 那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。 下面以高宽 阅读全文
posted @ 2020-07-17 22:10
前端一点红
阅读(2461)
评论(0)
推荐(0)
摘要：
在自动化元素定位操作中经常使用智能等待来加强定位的强壮性，主要就是因为WebDriver没有提供页面加载场景的方法；在使用JavaScript知识的突然心生灵感，可以使用JavaScript来配合验证页面加载，结果发现我真是井底之蛙。 一、domcument.readyState 首先定位从Docu 阅读全文
posted @ 2020-07-17 22:09
前端一点红
阅读(3536)
评论(0)
推荐(0)
摘要：
最近在开发小程序中，需要用到音频播放功能。但在初始化时，使用InnerAudioContext.duration获取不到音频的时长。 Page({ /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 创建一个audio this.innerAu 阅读全文
posted @ 2020-07-17 22:07
前端一点红
阅读(1552)
评论(0)
推荐(0)
摘要：
最近在做项目时，有一个需求是批量打印好多个合同，使用AJAX向后台传送数据，等待后台执行后，需要把生成之后的文件地址传送过来。 后台的处理时间比较长，根据合同的多少可能等待时间比较长，会达到10s左右，这个时候如果不加任何的提示，会导致用户因为没有看到是否执行而导致重复的操作，为了增加用户的体验感， 阅读全文
posted @ 2020-07-17 22:05
前端一点红
阅读(3131)
评论(0)
推荐(0)
摘要：
css已经越来越强大了 ，可以使用它来绘制各种简单的形状，用于代替图片显示，这次的分享主要用到画圆，扇形，三角形等知识点，由于IE9以上才支持圆角，暂时不考虑兼容问题 css实现圆形 <div class="circle"></div> <style> .circle { border-radius 阅读全文
posted @ 2020-07-17 22:04
前端一点红
阅读(1428)
评论(0)
推荐(0)
摘要：
css3里有个很强大的功能，就是计算器，使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。与有序列表相比，突出特性在于可以对任意元素计数，同时实现个性化计数。 简而言之，计数器就是采用css给html元素自动生成编号。其本质上是由css维护的变量，其值可以通过css规则递增以跟踪 阅读全文
posted @ 2020-07-17 21:50
前端一点红
阅读(720)
评论(0)
推荐(0)
摘要：
一般默认的滚动条会比较丑，我们可以利用css或者js来实现实现自定义滚动条的功能； 下面就整理2种实现方式 1、css自定义滚动条 需要在WebKit平台上才支持，代码如下： ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track 阅读全文
posted @ 2020-07-17 21:48
前端一点红
阅读(2057)
评论(0)
推荐(0)
摘要：
iframe高度自适应内容 需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 设置iframe 自适应高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以 阅读全文
posted @ 2020-07-17 21:46
前端一点红
阅读(4993)
评论(0)
推荐(0)
摘要：
文字选中效果，这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的，不过可以通过css进行设置。 代码如下： /*文字选中效果*/ *::selection { background-color: palevioletred; color: white; } *::-moz-selec 阅读全文
posted @ 2020-07-17 21:44
前端一点红
阅读(3174)
评论(0)
推荐(0)
摘要：
最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。 说白了，就是一件事，就是如何读取或写入本地文件系统中的文件。 这件事情在html5以前是一件非常恐怖的，因为浏览器对本地文件系统 阅读全文
posted @ 2020-07-17 21:43
前端一点红
阅读(9439)
评论(0)
推荐(0)
摘要：
在目前的前端开发中，我们经常需要进行响应式的网站开发。提起响应式，大家应该想到三个概念： 弹性布局， 弹性图片， 媒体查询。本文着重介绍一下弹性图片，也就是响应式图片的解决方案。 一、js或服务端 通过js或者服务端来控制图片的加载，原理就是跟踪window的resize事件，然后修改图片的路径，代 阅读全文
posted @ 2020-07-17 21:41
前端一点红
阅读(1130)
评论(0)
推荐(0)
摘要：
在前端应用越来复杂的今天，为了监控前端应用是否正常运行，通常会在前端收集一些错误与性能等数据，最终我们会将这些数据上报到服务端。 上报的方式有很多，理论上我们只要能把数据发给服务端就行了。在浏览器中可以发送请求的方式非常多，包括不限于：xhr、fetch、script标签、img标签、link标签、 阅读全文
posted @ 2020-07-17 21:39
前端一点红
阅读(631)
评论(0)
推荐(0)
摘要：
前言 从 Yarn 横空出世推出 lock 文件以来，已经两年多时间了，npm 也在 5.0 版本加入了类似的功能，lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件，以及它的一些成本与风险，当然其中一些观点对于后端也是适用的。 为什么需要 lock 阅读全文
posted @ 2020-07-17 21:34
前端一点红
阅读(1517)
评论(0)
推荐(0)
摘要：
对于IE8及以上版本，例如： <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" /> 强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果用分号（；）分隔，对于不同的浏览器版本就有不同的兼容性，例如 <meta 阅读全文
posted @ 2020-07-17 21:24
前端一点红
阅读(2425)
评论(0)
推荐(2)
摘要：
Wire 的安全研究员 Sabri Haddouche 发现了一种新的攻击，只需访问包含某些 css 和 html 的网页，就会导致 iOS 重新启动或重新启动以及 macOS 冻结。 Windows 和 Linux 用户不受此错误的影响。 攻击利用 -webkit-backdrop-filter 阅读全文
posted @ 2020-07-17 21:22
前端一点红
阅读(195)
评论(0)
推荐(0)
摘要：
今天给大家分享一款非常常用的css 加载动画，这款css3 Loading动画主要由几个小球通过规律的上下跳动，渐隐渐显而成，效果十分生动、流畅。兼容IE8以上，尤其适合在移动端中使用，基本代替了图片实现加载的效果。 反弹加载动画效果如下： 代码的实现： <div class="bouncing-l 阅读全文
posted @ 2020-07-17 21:20
前端一点红
阅读(1164)
评论(0)
推荐(0)
摘要：
web设计排版多种多样，如何更好的排版、设计出更符合美学的设计了？设计该如何更好的做好网页设计的布局排版了，今天给大家分享这几个小技巧，希望大家能有所用。 一、强调字体 字体的设计与强调在网页当中相当重要，合适的排版和适当的字体强调，不仅可以让用户快速的抓住网站中的重点，同样可以增强网站对用户的吸引 阅读全文
posted @ 2020-07-17 21:18
前端一点红
阅读(1080)
评论(0)
推荐(0)
摘要：
webpack管理的项目，我们希望用sass定义样式，为了正常编译，需要做如下配置。这里不讲webpack的入门，入门的文章，我推荐这篇《webpack入门》。 为了使用sass，我们需要安装sass的依赖包 //在项目下，运行下列命令行 npm install --save-dev sass-lo 阅读全文
posted @ 2020-07-17 19:39
前端一点红
阅读(2282)
评论(0)
推荐(0)
摘要：
当Web项目前后端分离开发的时候, 由于域名不一致, 会出现无法请求和无法维持会话的情况 OPTIONS 在前端Ajax请求后台的时候, 打开控制台可以看到, 每一次请求之前都会有一次OPTIONS类型的请求OPTIONS称为预检请求, 通过这个请求, 浏览器会告知服务器,接下来的请求的情况 Acc 阅读全文
posted @ 2020-07-17 19:37
前端一点红
阅读(4969)
评论(0)
推荐(0)
摘要：
box-sizing 属性 1.content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width，heig 阅读全文
posted @ 2020-07-17 19:03
前端一点红
阅读(1834)
评论(0)
推荐(0)
摘要：
效果图： 主要运用的是1.border 组成的直角三角形。2，before 和 after 伪元素 。3，z-index属性 css代码： div.bubble{ position: absolute; margin: 0; padding: 0; color: #86181d; backgroun 阅读全文
posted @ 2020-07-17 19:02
前端一点红
阅读(750)
评论(0)
推荐(0)
摘要：
/*向左移动并弹性显示*/ @-webkit-keyframes fadeToLeftTan{ 0%{ -webkit-transform:translateX(100%); opacity:0;} 70%{ -webkit-transform:translateX(-5%); opacity:1; 阅读全文
posted @ 2020-07-17 18:38
前端一点红
阅读(441)
评论(0)
推荐(0)
摘要：
一、调试准备 Windows10 64bits IDE：Visual Studio Code1.28.2 安装插件：Chrome（安装方法：Debug -> Install Additional Debuggers... -> Debugger for Chrome，重新启动vscode即可。） 二 阅读全文
posted @ 2020-07-17 18:32
前端一点红
阅读(1457)
评论(0)
推荐(0)
摘要：
你有没有遇到过： 前端代码刚写完，后端的接口又变了。 接口文档永远都是不对的。 测试工作永远只能临近上线才能开始。 为什么前后端分离了，你比从前更痛苦？ 前后端分离早已经不是新闻，当真正分离之后确遇到了更多问题。要想解决现在的痛，就要知道痛的原因： 为什么接口会频繁变动？ 设计之初没有想好。 这需要 阅读全文
posted @ 2020-07-17 18:31
前端一点红
阅读(440)
评论(0)
推荐(0)
摘要：
-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想 阅读全文
posted @ 2020-07-17 18:18
前端一点红
阅读(382)
评论(0)
推荐(0)
摘要：
如今web服务随处可见，成千上万的web程序被部署到公网上供用户访问，有些系统只针对指定用户开放，属于安全级别较高的web应用，他们需要有一种认证机制以保护系统资源的安全，本文将探讨五种常用的认证机制及优缺点。 HTTP基本认证（HTTP Basic Auth） 在HTTP中，HTTP基本认证是一种 阅读全文
posted @ 2020-07-17 18:16
前端一点红
阅读(2300)
评论(0)
推荐(0)
摘要：
jsON Web Token（JWT）是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。其JWT的组成： 一个JWT实际上就是一个字符串，它由三部分组成，头部、载荷与签名。 载荷（Payload） { "iss": "Online JWT Builder", "i 阅读全文
posted @ 2020-07-17 18:15
前端一点红
阅读(4966)
评论(0)
推荐(0)
摘要：
作为JavaScript替代，一种Web开发的新形式已经浮出水面：WebAssembly. Web开发与JavaScript开发向来是同义词。就是说，直到现在。但一种新的Web开发形式已然出现，声言会取代JavaScript。作为一个拥有15年Web开发经验的程序员，这个新方向瞬间吸引了我。 Web 阅读全文
posted @ 2020-07-17 18:08
前端一点红
阅读(521)
评论(0)
推荐(0)
摘要：
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域 保持图像的纵横比（图片不变形） 图片居中 不出现滚动条 多浏览器支持 以图片bg.jpg为例,最简单，最高效的方法 css3.0 归功于css3.0新增的一个属性bac 阅读全文
posted @ 2020-07-17 16:48
前端一点红
阅读(1121)
评论(0)
推荐(0)
摘要：
思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ... 首先，先是前端的布局样式 <body> /*首先，在 阅读全文
posted @ 2020-07-17 16:47
前端一点红
阅读(380)
评论(0)
推荐(0)
摘要：
首先使用vscode的搬砖猿，想要在vscode编辑器里面很方便的编译less文件，需要在扩展商店里面下载一款名叫Esay LESS的超好用扩展（我自己都不信），哈哈，其实还好。 安装完扩展之后，最好点击一下重载以启用，为了后面更好的使用这个扩展，其他的扩展也都是重载后使用更佳。。。 想要配置这些扩 阅读全文
posted @ 2020-07-17 16:45
前端一点红
阅读(1427)
评论(0)
推荐(0)
摘要：
块级元素：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！ 其中还有一种结合两种模式有点的显示模式： 行内块元素：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一 阅读全文
posted @ 2020-07-17 16:42
前端一点红
阅读(1877)
评论(0)
推荐(0)
摘要：
在ios中为了让滑动更流畅，不那么生涩，我们需要使用-webkit-overflow-scrolling属性，如下： -webkit-overflow-scrolling : touch; 其工作原理是：在有这个属性的容器上，系统会创建了一个uiscrollview，应用于该元素并将之作为渲染对象， 阅读全文
posted @ 2020-07-17 16:38
前端一点红
阅读(7110)
评论(0)
推荐(0)
摘要：
概述 html几乎是平铺直叙的。css是一个伟大的进步，它清晰地区分了页面的结构和外观。JavaScript添加一些魅力。道理上讲是这样的。现实世界还是有点不一样。 在本教程中，您将了解在浏览器中看到的内容是如何实际呈现的，以及如何在必要时进行抓取。特别是，您将学习如何计算Disqus评论。我们的工 阅读全文
posted @ 2020-07-17 16:35
前端一点红
阅读(2697)
评论(0)
推荐(0)
摘要：
Web技术飞速发展的如今，我们在感受新技术带来的便捷和喜悦的同时，也时常在考虑着一个问题：老技术如何迁移。正如本文的主题一样，Flash技术在早年风靡在Web领域，曾经发挥着无尽力量的一个工具正逐渐失去了其重要性。由于性能，兼容性，版权问题，Flash的市场正在消退，曾经靠Flash实现的功能和特性 阅读全文
posted @ 2020-07-17 16:33
前端一点红
阅读(2165)
评论(0)
推荐(0)
摘要：
在ios端默认的长按选择，可以对文字进行复制粘贴。但是在实际开发中，针对一些按钮一般要避免长按时弹出选中文字，或者一些罩层要避免弹出。 这篇文章通过css3实现禁止ios端长按复制选中文字的方法。 css代码如下： *{ -webkit-touch-callout:none; /*系统默认菜单被禁用 阅读全文
posted @ 2020-07-17 00:16
前端一点红
阅读(2446)
评论(0)
推荐(0)
浙公网安备 33010602011771号