随笔分类 - CSS
摘要：最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。 说白了，就是一件事，就是如何读取或写入本地文件系统中的文件。 这件事情在html5以前是一件非常恐怖的，因为浏览器对本地文件系统
阅读全文
摘要：在前端应用越来复杂的今天，为了监控前端应用是否正常运行，通常会在前端收集一些错误与性能等数据，最终我们会将这些数据上报到服务端。 上报的方式有很多，理论上我们只要能把数据发给服务端就行了。在浏览器中可以发送请求的方式非常多，包括不限于：xhr、fetch、script标签、img标签、link标签、
阅读全文
摘要：前言 从 Yarn 横空出世推出 lock 文件以来，已经两年多时间了，npm 也在 5.0 版本加入了类似的功能，lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件，以及它的一些成本与风险，当然其中一些观点对于后端也是适用的。 为什么需要 lock
阅读全文
摘要：Wire 的安全研究员 Sabri Haddouche 发现了一种新的攻击，只需访问包含某些 css 和 html 的网页，就会导致 iOS 重新启动或重新启动以及 macOS 冻结。 Windows 和 Linux 用户不受此错误的影响。 攻击利用 -webkit-backdrop-filter
阅读全文
摘要：今天给大家分享一款非常常用的css 加载动画，这款css3 Loading动画主要由几个小球通过规律的上下跳动，渐隐渐显而成，效果十分生动、流畅。兼容IE8以上，尤其适合在移动端中使用，基本代替了图片实现加载的效果。 反弹加载动画效果如下： 代码的实现： <div class="bouncing-l
阅读全文
摘要：web设计排版多种多样，如何更好的排版、设计出更符合美学的设计了？设计该如何更好的做好网页设计的布局排版了，今天给大家分享这几个小技巧，希望大家能有所用。 一、强调字体 字体的设计与强调在网页当中相当重要，合适的排版和适当的字体强调，不仅可以让用户快速的抓住网站中的重点，同样可以增强网站对用户的吸引
阅读全文
摘要：webpack管理的项目，我们希望用sass定义样式，为了正常编译，需要做如下配置。这里不讲webpack的入门，入门的文章，我推荐这篇《webpack入门》。 为了使用sass，我们需要安装sass的依赖包 //在项目下，运行下列命令行 npm install --save-dev sass-lo
阅读全文
摘要：当Web项目前后端分离开发的时候, 由于域名不一致, 会出现无法请求和无法维持会话的情况 OPTIONS 在前端Ajax请求后台的时候, 打开控制台可以看到, 每一次请求之前都会有一次OPTIONS类型的请求OPTIONS称为预检请求, 通过这个请求, 浏览器会告知服务器,接下来的请求的情况 Acc
阅读全文
摘要：box-sizing 属性 1.content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width，heig
阅读全文
摘要：效果图： 主要运用的是1.border 组成的直角三角形。2，before 和 after 伪元素 。3，z-index属性 css代码： div.bubble{ position: absolute; margin: 0; padding: 0; color: #86181d; backgroun
阅读全文
摘要：/*向左移动并弹性显示*/ @-webkit-keyframes fadeToLeftTan{ 0%{ -webkit-transform:translateX(100%); opacity:0;} 70%{ -webkit-transform:translateX(-5%); opacity:1;
阅读全文
摘要：-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想
阅读全文
摘要：在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域 保持图像的纵横比（图片不变形） 图片居中 不出现滚动条 多浏览器支持 以图片bg.jpg为例,最简单，最高效的方法 css3.0 归功于css3.0新增的一个属性bac
阅读全文
摘要：思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ... 首先，先是前端的布局样式 <body> /*首先，在
阅读全文
摘要：首先使用vscode的搬砖猿，想要在vscode编辑器里面很方便的编译less文件，需要在扩展商店里面下载一款名叫Esay LESS的超好用扩展（我自己都不信），哈哈，其实还好。 安装完扩展之后，最好点击一下重载以启用，为了后面更好的使用这个扩展，其他的扩展也都是重载后使用更佳。。。 想要配置这些扩
阅读全文
摘要：在ios中为了让滑动更流畅，不那么生涩，我们需要使用-webkit-overflow-scrolling属性，如下： -webkit-overflow-scrolling : touch; 其工作原理是：在有这个属性的容器上，系统会创建了一个uiscrollview，应用于该元素并将之作为渲染对象，
阅读全文
摘要：概述 html几乎是平铺直叙的。css是一个伟大的进步，它清晰地区分了页面的结构和外观。JavaScript添加一些魅力。道理上讲是这样的。现实世界还是有点不一样。 在本教程中，您将了解在浏览器中看到的内容是如何实际呈现的，以及如何在必要时进行抓取。特别是，您将学习如何计算Disqus评论。我们的工
阅读全文
摘要：Web技术飞速发展的如今，我们在感受新技术带来的便捷和喜悦的同时，也时常在考虑着一个问题：老技术如何迁移。正如本文的主题一样，Flash技术在早年风靡在Web领域，曾经发挥着无尽力量的一个工具正逐渐失去了其重要性。由于性能，兼容性，版权问题，Flash的市场正在消退，曾经靠Flash实现的功能和特性
阅读全文
摘要：在ios端默认的长按选择，可以对文字进行复制粘贴。但是在实际开发中，针对一些按钮一般要避免长按时弹出选中文字，或者一些罩层要避免弹出。 这篇文章通过css3实现禁止ios端长按复制选中文字的方法。 css代码如下： *{ -webkit-touch-callout:none; /*系统默认菜单被禁用
阅读全文
摘要：自定义可拖动的进度条，如下图效果： 代码分三部分 html <body> <div id="demo"> <div class="progress"> <div class="progress-bar"> <div class="progress-thumb"></div> </div> </div
阅读全文