随笔分类 - HTML
摘要：在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现呐？ 默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图，然后我们把缩略图模糊处理后按照原图尺寸显示，这样做的目的是为了提高用户体验； 使用js去监听原图的加载，当
阅读全文
posted @ 2020-06-06 16:01
前端一点红
摘要：web单页应用是什么？ Web单页应用就是指只有一个Web页面作为入口的应用，在浏览器中运行期间不会重新加载页面。也就是说浏览器一开始会加载它必需的thml、css和Js，之后所有的交互操作都在一个页面上完成，这些都是由JavaScript动态的加载合适的内容来响应用户的操作，所以Web单页应用会包
阅读全文
posted @ 2020-06-05 17:50
前端一点红
摘要：解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. 1 $.ajax({ 2 type:'get', 3 url:url, 4 // 下面的两行代码,就是解决跨域的关键 5 xhrFiel
阅读全文
posted @ 2020-06-05 17:49
前端一点红
摘要：在全面屏的 iPhone X 上，不需要而外的代码，Safari 可以非常完美的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内，并不会被四周的圆角或者“小刘海”遮挡住。 Safari 使用页面的背景色（一般就是 <body> 或者 <html> 元素的 background-col
阅读全文
posted @ 2020-06-05 17:41
前端一点红
摘要：一、实现原理 首先，我们来一个圆（黑色）。接着，再来两个半圆，将黑色的圆遮住。（为了演示，左右两侧颜色不一样）这时候，我们顺时针旋转右侧蓝色的半圆，下面的黑色圆就会暴露出来，比如我们旋转45度（12.5%），效果出来了。如果我们将蓝色的右半圆同样设置成灰色，看效果，一个12.5%的饼图就出来了！ O
阅读全文
posted @ 2020-06-05 17:37
前端一点红
摘要：1. 什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的“切图（FE）->套模板（RD）”的开发模
阅读全文
posted @ 2020-06-05 17:34
前端一点红
摘要：方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin是相对当
阅读全文
posted @ 2020-06-05 17:31
前端一点红
摘要：我们在网页中很多都有右键菜单的功能，一般点击右键显示的是浏览器默认的菜单选项，那么我们直接如何通过css+js实现html的右键菜单呢？这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。 实现原理 在HTML中基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单
阅读全文
posted @ 2020-06-05 17:28
前端一点红
摘要：tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会
阅读全文
posted @ 2020-06-05 17:22
前端一点红
摘要：Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样，它的目的是解决这些团队使用 npm 面临的少数问题，即： 安装的时候无法保证速度/一致性 安全问题，因为 npm 安装时允许运行代码
阅读全文
posted @ 2020-06-05 17:16
前端一点红
摘要：在常规网页开发中（单页应用除外哈），经常会遇到把一些通用内容的页面集中到一个页面中，需要使用这些页面只需要包含引入即可，这样有利于维护和修改，当通用页面修改时只需更改一个文件就可以了，不需要每个文件单独处理。 例如：一个网站的页脚信息在每个网页都是一样的，把它命名为footer.html文件，在其他
阅读全文
posted @ 2020-06-05 17:07
前端一点红
摘要：在网页布局中，通常需要实现左边定宽右边自适应布局，默认html的结构如下： <div class="box"> <div class="left">左边定宽</div> <div class="right">右边自适应</div> </div 1、浮动布局 左边设置左浮动，右边宽度设置100% .l
阅读全文
posted @ 2020-06-05 17:05
前端一点红
摘要：前言 在JSBridge实现后，前端网页与原生的交互已经通了，接下来就要开始规划API，明确需要提供哪一些功能来供前端调用。 但是在这之前，还有一点重要工作需要做： 明确H5与Native的职责划分，确定哪一些功能可以由H5实现，哪一些功能只能由原生实现 Native与H5职责划分 使用Hybrid
阅读全文
posted @ 2020-06-05 16:58
前端一点红
摘要：Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 nodeType值为1 nodeName为元素标签名 nodeValue为null parentNode
阅读全文
posted @ 2020-06-03 20:25
前端一点红
摘要：渐进式 Web 应用是利用现代浏览器的特性，可以添加到主屏幕上，表现得像原生应用程序一样的 Web 应用程序。 什么是渐进式 Web 应用 渐进式 Web 应用（PWA）本质上与普通的网站没有什么不同 - 它也是由 HTML、CSS 和 JavaScript 组成，并且存活于浏览器中。将 PWA 与
阅读全文
posted @ 2020-06-03 20:22
前端一点红
摘要：最近一两年前端最火的技术莫过于ReactJS，即便你没用过也该听过，ReactJS由业界顶尖的互联网公司facebook提出，其本身有很多先进的设计思路，比如页面UI组件化、虚拟DOM等。本文将带你解开虚拟DOM的神秘面纱，不仅要理解其原理，而且要实现一个基本可用的虚拟DOM。 1.为什么需要虚拟D
阅读全文
posted @ 2020-06-03 20:17
前端一点红
摘要：背景 最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行，碰到某个国家的地标就弹出该国的相应say hello的tip，要求横屏显示，不能竖屏。 然而当用户竖屏打开时，而且没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。 而且有些机型有些app不能横
阅读全文
posted @ 2020-06-03 20:14
前端一点红
摘要：看到一个需求，如下图，知乎手机网页版的一个视觉效果，对内容很长的部分有一个渐变的隐藏的效果，个人觉得这个设计还是很好的，符合手机大小的应用场景，没有一下子显示完全，可以很快的滑倒页面底部，一定程度上减少了滑动时间，用户体验很好，对整个页面有一个大概的预览，强迫症会感觉很爽。 具体怎么实现这个效果，分
阅读全文
posted @ 2020-06-03 20:12
前端一点红
摘要：calc的介绍 在css3样式中有一个类似与函数的计算属性calc()，它主要用于指定元素的长度，无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。calc支持的运算单位有rem , em , %, px，calc是支持单位的混合使用
阅读全文
posted @ 2020-06-03 20:09
前端一点红
摘要：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。 伪类 用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以
阅读全文
posted @ 2020-06-03 20:07
前端一点红
浙公网安备 33010602011771号