随笔分类 - HTML
摘要：作为个人开发者，为自己的辛苦开发的项目配上支付功能，才有盈利的盼头！但是目前大部分都需要企业资质，那对应个人而言如何在网站、应用中接入支付功能呢？这里找了一些不需要企业资质的第三方支付平台。 1、PayPal 个人，企业都可以接入，作为一款主打跨境支付的产品，主打境外收付款，那么对于做外贸的朋友来说
阅读全文
posted @ 2020-07-16 18:46
前端一点红
摘要：在html中一个table表单主要由tr、td、th元素组成,比较复杂一点的表单还会包含caption、 col、 colgroup、 thead、tfoot、 tbody等元素. 一、table内标签含义: <tr>:表格的行标签,有多少对<tr></tr>就有多少行.<td>:普通单元格标签,位
阅读全文
posted @ 2020-07-16 18:32
前端一点红
摘要：css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。 方式一：利用css3滤镜filter中的 drop-shadow 代码如下： <style> .icon{ display: inline-block; widt
阅读全文
posted @ 2020-07-16 18:28
前端一点红
摘要：The web has evolved. Finally, testing has too. 事实上对于 UI 自动化测试来说，许多所谓框架之间并没有太多差别，也从来不是影响整套测试用例是否健壮的关键性因素。相比之下，如何提高测试用例稳定性以及出现错误时 debug 的便捷性才是让 UI 自动化测试
阅读全文
posted @ 2020-07-16 18:21
前端一点红
摘要：css3 动画给 Web 的用户体验带来了巨大提升，本文将尝试从浏览器渲染的角度，来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。 60fps 与设备刷新率 目前大多数设备的屏幕刷新率为60fps（Frame per Second），即每秒60帧。因此，如果在页面中有一个动画或渐变效
阅读全文
posted @ 2020-07-16 18:18
前端一点红
摘要：不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用css sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站
阅读全文
posted @ 2020-07-16 18:16
前端一点红
摘要：css3非常强大，我们可以利用css3相关特性绘制很多平面图形，并且可以制作很多简单的动画。今天要分享的是一款用纯css3实现的可爱表情动画，一共有7组表情动画。 这些表情图实在太可爱了，哈哈CSS真的是太强大了 效果如下： pixabayhttps://www.wode007.com/sites/
阅读全文
posted @ 2020-07-16 18:15
前端一点红
摘要：什么是css sprites? css sprites：精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量 css sprites优点： 1、减少网页的HTTP请求，提高页面性能2、图片命名上的困扰3、更
阅读全文
posted @ 2020-07-16 18:12
前端一点红
摘要：作为网页内容的一部分，图像和视频通常要消耗很多资源加载。要提高网页应用的性能，如何避免资源浪费在加载图像和视频上就很重要了。但是，很多时候我们都不愿意减少网页上的媒体资源，所以我们经常无从下手。幸运的是，我们有懒加载这个绝招，它可以帮助我们减少加载时间和降低负载，而不在内容上偷工减料。 什么是懒加载
阅读全文
posted @ 2020-07-16 18:11
前端一点红
摘要：本文主要列举在如今前后端分离、手机App大行其道的现状下，用户认证、授权的几种做法及对比。PS. 本文假设你已经理解了各种认证模式的具体细节。 OAuth2.0的几种模式 OAuth2.0是一个被广泛采用的事实标准，它同时包含认证和授权两种模式，我们来看一下它有几种模式： Grant typeCli
阅读全文
posted @ 2020-07-16 18:07
前端一点红
摘要：Sass和Less这样的预处理器，让我们的css代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性，增强了动态编写css的能力，从而减少重复代码，也加快了我们开发速度。 近年来，一些动态特性开始作为规范的一部分，出现在css语言中。css变量(css variables)，或
阅读全文
posted @ 2020-07-16 18:04
前端一点红
摘要：本本节课讲解在webpack v4中的 Scss 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。Scss 是 Sass 3 引入新的语法，其语法完全兼容 css3，并且继承了 Sass 的强大功能。也就是说，任何标准的 css3 样式表都是具有相同语义的有效的
阅读全文
posted @ 2020-07-16 17:32
前端一点红
摘要：html中的空格的规则 在html中内容中的多个空格一般会被视为一个，连续的多个空格符被自动合并了。同时内容前后的空格也会被清除， 如下： <p> fly63 com </p> 显示效果为： fly63 com 备注：浏览器的这种机制处理，同样适用于除了普通的空格键，还包括制表符（\t）和换行符（\
阅读全文
posted @ 2020-07-16 17:28
前端一点红
摘要：css中:focus-within是什么 在css中 :focus-within 是一个伪类，现在已经被列入到css选择器中（css Level 4 selector）。css中伪类:focus-within能非常方便处理获取焦点状态， 当元素本身或其后代获得焦点时，:focus-within伪类的
阅读全文
posted @ 2020-07-16 17:26
前端一点红
摘要：网站的加载速度不仅影响着用户体验，也会影响搜索引擎的排名，在百度推出“闪电算法”以来，将网站首屏打开速度被列入优化排名行列，并明确指定打开时间为 2 秒。作为前端开发的我们需要如果来优化网站的打开速度呢？下面就整理挖掘出很多细节上可以提升性能的东西分享给大家 优化网站性能的14条规则： 1. 尽可能
阅读全文
posted @ 2020-07-16 17:25
前端一点红
摘要：用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验 Skeleton Screen Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展
阅读全文
posted @ 2020-07-16 17:24
前端一点红
摘要：为了让网页内容更好的适应各类屏幕尺寸，一般都需要用到height:100%。但是会发现，height百分比失效并没有生效，这是什么原因造成的呢，以及我们需要如何解决呢？ height百分比失效的原因 你让div的height="100%"，执行网页时，css先执行到，而整个网页中的内容还没有完全载入
阅读全文
posted @ 2020-07-16 17:09
前端一点红
摘要：问题产生的原因 当我们为div标签声明了宽度，但是仍然会出现文本越界的情况，不知道大家有没有发现，只有文本内容为单词或者纯数字的时候才会出现这种情况。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。 解决方法 需要使用css中的word-wrap
阅读全文
posted @ 2020-07-16 17:08
前端一点红
摘要：css的pointer-events属性 auto：与 pointer-events 属性未指定时的表现效果相同。 none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒
阅读全文
posted @ 2020-07-16 17:06
前端一点红
摘要：一、css下兼容性的元素水平/垂直翻转实现 随着现代浏览器对css3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的css代码如下： /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transfor
阅读全文
posted @ 2020-07-16 16:55
前端一点红
浙公网安备 33010602011771号