前端开发 Html/Css
刷新
React18 之 Suspense

博主头像 我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 Suspense Suspense 组件我们并不陌生，中文名可以理解为暂停or悬停 , 在 React16 中我们通常在路由懒加载中配合 Lazy 组件 ...

代码+案例，实战解析BeautifulSoup4

博主头像 本文分享自华为云社区《从HTML到实战：深入解析BeautifulSoup4的爬虫奇妙世界》，作者：柠檬味拥抱。 网络上的信息浩如烟海，而爬虫技术正是帮助我们从中获取有用信息的重要工具。在爬虫过程中，解析HTML页面是一个关键步骤，而BeautifulSoup4正是一款功能强大的解析器，能够轻松解析 ...

记录和分享一下自己自定义的博客园主题样式

博主头像 前言 以前使用的都是默认的博客园主题，最近刚好有空，着手定制以下自己的博客园主题。最终效果参考当前的博客，如果看不到则需要在博客园首页头像处悬停关闭简洁模式 思路是尽量保持原有结构，不进行破坏性改动，以 css 样式为主 本主题是轻量化的，只是在原有基础上微调样式。如有需要更丰富功能的可以自己搜索博 ...

[CSS] 响应式设计

博主头像 响应式设计旨在编写一套代码，在不同设备上都能有良好的表现。响应式设计有两种思路：桌面端优先和移动端优先，它们的区别是先实现一种布局，再使用媒体查询设置断点，实现不同屏幕尺寸下的布局，逐渐过渡到另一端。即由大到小和由小到大的区别。 ...

[CSS] 级联与特异性

博主头像 当有多条冲突的CSS规则指向同一元素，则浏览器会计算特异性选择更具体的规则。如果特异性相同，则按照代码顺序，靠后的规则覆盖前面的规则。 ...

深入浅出 testing-library

博主头像 我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 The more your tests resemble the way your software is used, the more confide ...

记录--如何实现一个雨滴滑落效果

博主头像 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 如何实现一个雨滴落下效果 前言 下雨天坐在车窗前，看着雨滴顺着车窗渐渐落下，这一唯美的场景，忍不住想记录下来。最近在纠结电脑壁纸时，无意间看到有类似的场景，可以将自己喜欢的壁纸加上这种效果。作为多年切图仔，不由地想到了用css动画应该可以 ...

你想要的龙年特效来了

博主头像 废话不多说，龙年腾云特效送给大家 预览 在线预览 龙年腾云 源码 龙是使用的 svg，你也可以替换成其他样式的龙，而云是图片转化成的 base64 编码，所以整个文件就是一个 html。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

Firefox禁止远程字体加速网页加载及图标字体补充安装

禁止远程字体的作用 作为程序员，日常工作中我们可能经常需要打开国内外许多不同的网站寻找教程，但是很多国外网站，特别是基于WordPress的博客，往往会使用Google字体，这是使得我们访问这些网站的时候会自动尝试加载这些字体，而严重影响打开速度。这时候我们可以考虑禁止所有的远程字体以加速访问。虽然 ...

记录--被中文输入法坑死了

博主头像 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 PM：在PC端做一个@功能吧，就是那种...。 我：你不用解释我知道那个功能，监听keydown事件，然后e.keycode 50，那可太简单了。 那可太简单了，可太简单了，太简单了，简单了，单了，了......(掉进坑里的回声) 坑 ...

袋鼠云数栈产品中 AI+ 实现原理剖析

博主头像 我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：修能 生产力工具 + AI 是不可逆转的趋势，慢慢的大模型能力通过 AI Agent 落地的工程化能力也开始趋于成熟。作为大数据产品的数栈也必然是需要借助 A ...

【动画进阶】神奇的 3D 卡片反光闪烁动效

博主头像 最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- key-drop，效果如下： 非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果： 该效果的几个核心点： 卡片的 3D 旋转跟随鼠标移动效果 如何让卡片在 H ...

记录--前端实现翻转图像

博主头像 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 翻转图像是在视觉上比较两个不同图像的常用方法。单击其中一个将翻转它，并显示另一个图像。 布局 布局结构如下： <div class="flipping-images"> <div class="flipping-images__inner ...

小程序开发实战案例五 | 小程序如何嵌入H5页面

博主头像 在接入小程序过程中会遇到需要将 H5 页面集成到小程序中情况，今天我们就来聊一聊怎么把 H5 页面塞到小程序中。 本篇文章将会从下面这几个方面来介绍： 小程序承载页面的前期准备 小程序如何承载 H5 小程序和 H5 页面如何通讯 小程序和 H5 页面的相互跳转 小程序承载页面的前期准备 首先介绍下我 ...

Flex 弹性盒子布局

博主头像 可以少去理解一些不必要的概念，而多去思考为什么会有这样的东西，它解决了什么问题，或者它的运行机制是什么？ 1. 弹性盒子布局概念 Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。比如： .box{ displ ...

[前端] 重排和重绘

博主头像 网页的生成过程 解析HTML，生成DOM树。 解析CSS，生成CSSOM树。 结合DOM树和CSSOM树，为每一个节点计算CSS属性，生成渲染树，RenderTree。 生成布局（Flow），计算渲染树上所有节点的位置。 将布局绘制（Paint）到屏幕上。 布局生成和绘制的过程就是渲染。 网页生成的 ...

23年通天塔搭建页前端性能优化阶段分享

博主头像 前言 通天塔搭建页项目是用来搭建各类活动页面，比较老且业务复杂的项目，可优化点还是非常多的。今年侧重对运营页首屏加载的性能优化，在保证系统稳定可控、需求持续迭代前提下，最终提升了58.8%速度。 回顾一年的不断探（cai）索（keng），得出的感受的是： 选择大于努力了，努力的方向不对，想取得成果就 ...

从前端角度浅谈性能 | 京东物流技术团队

博主头像 1 前言 自网站诞生以来，页面白屏时间、用户交互的响应速度等一直都是开发者关心的问题，这直接影响了一个网站能否为用户的浏览提供舒适的服务，而这种舒适度，直接关系着对用户的吸引力，毕竟谁都不能忍受一个页面长达10秒的空白屏时间，更别说点击按钮后，页面长时间的毫无反应。 web 的性能一定程度上影响了用 ...

flex布局之美，以后就靠它来布局了

博主头像 写在前面 在很久很久以前，网页布局基本上通过table 元素来实现。通过操作table 中单元格的align 和valign可以实现水平垂直居中等 再后来，由于CSS 不断完善，便演变出了：标准文档流、浮动布局和定位布局 3种布局 来实现水平垂直居中等各种布局需求。 下面我们来看看实现如下效果，各种 ...

<1234···16>