每一个单独的项目都使用绝对定位，并设置100%的高度和放置在它们父容器.cd-project-info的左上角位置。开始它们是堆叠在一起的。...接着，第二和第三个项目被使用translateY属性沿Y轴向下移动，分别移动.cd-project-info高度的1/3和2/3。这样就是3个项目分别在同一个屏幕中显示1/3的部分。...同时将该项目的兄弟元素移动到屏幕之外translateY(100%)，这样使该项目占满整个屏幕。...它的::before伪元素是一个空白占位，它等于屏幕视口的宽度和高度，它的作用是让项目图片开始时可以全屏显示，而不是被content-wrapper的内容覆盖。...当用户点击了.cd-nav-trigger按钮之后，所有的项目被移动到屏幕的下方，这时全屏导航菜单被显示出来。
后者必须是大于0的数字，而X和Y也可以是负数，从而几乎在每个方向上都可以移动阴影。 ? 我们还可以通过向同一对象添加多个阴影，从而来堆叠阴影，以获得非常有趣的结果。...Neumorphism（新拟物风-同态） 在这种新拟物风格中，阴影和负X和Y值的堆叠，是使Neumorphism工作所需的核心原理。 ?...内阴影之所以用的不多，是因为它们看起来像堆叠在一起的两个层。在这种情况下，可以追加外部阴影，因为它可以提供深度。这样可以看起来更加自然。如果单纯使用内阴影，会让元素看起来就像一个凹进去的洞。 ?...这种样式的唯一用例是表单输入（表单字段和复选框或单选按钮）和Neumorphism风格中的拉伸形状。在某些情况下，它们可用于使对象看起来更逼真，但应适度使用。 ?...在此示例中，具有90％不透明度和背景模糊的正方形叠加层位于图像的右侧。如您所见，当将三个白点放置在“投射”背景模糊的对象下时，它们会发生不一样的变化。
# 五：响应式和移动端开发### 问题:1.什么是媒体查询（Media Queries）？如何使用它们？2.如何优化移动端页面的性能？...**优化移动端性能：**减少加载时间、使用触摸友好的UI、优化输入延迟、避免不必要的加载和重绘等。**视口和视口单位：**视口是用户在屏幕上看到的区域。...视口单位（如vw、vh、vmin、vmax）是相对于视口尺寸的单位，可以方便地实现响应式布局。# 六：版本控制### 问题:1.你如何使用 Git？2.描述一下 Git 的工作流程。...**Git 的 rebase 和 merge 的区别：**Merge：Merge操作会将两个分支的修改合并在一起，形成一个新的提交。...这些特性使代码更加简洁、易读和可维护。我积极学习和使用ES6的新特性，以提高代码质量和开发效率。# 八：软技能和团队协作### 问题:1.你如何管理前端开发中的复杂性和变化？
要在地图之间切换，请单击“地图工具”窗口右上角的“选择地图”按钮，然后在出现的下拉菜单中选择地图名称。 在你让你的玩家在你的地图上分开散，你仍然有一些重要的准备工作要做。...在出现的“新建标记”对话框中，为标记命名并将其设置为NPC或PC，然后单击“确定”按钮。 一旦一个标记在地图上，试着移动它，看看它的移动是如何被控制到你指定的网格上的。...右击菜单提供对所有重要的标记相关功能的访问，包括设置它面向哪个方向、设置健康栏和健康值、复制和粘贴功能（使您和您的玩家能够将标记从一个地图移动到另一个地图）等等。...现在你的玩家可以使用光源在地图上移动，而不必看到隐藏在附近柱子的阴影中或无辜的门后的东西……直到一切都太晚了！ 跟踪方案 最终，你的玩家会偶然发现一些想要杀死他们的东西，这意味着战斗。...MapTool使数字游戏变得简单有趣，最重要的是，它保持了开源和自我限制。通过学习MapTool并将其用于游戏，今天就可以升级 了。
使视口可以通过任意一侧的大手柄随意调整大小 特定设备。 将视口锁定为特定设备确切的视口大小，并模拟特定设备特性 媒体查询 媒体查询是自适应网页设计的基本部分。...快速预览媒体查询 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式 查看关联的 CSS 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 元素面板（Elements）...添加、启用和停用 CSS 类 点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作： 启用或停用当前与元素关联的类 向元素添加新类 ?...如果一条消息连续重复，而不是在新行上输出每一个消息实例，控制台将“堆叠”消息并在左侧外边距显示一个数字。...在对话框中输入你的条件。 按Enter激活断点。行号上出现橙色图标。 ?
且 Menu 按钮展示时，需要浮动在内容卡片上方，不能被遮挡，移动端和 PC 端顶部导航栏高度一致，均为 54px。 移动端导航栏的菜单项每一项独占一行。...="menu-btn" />：这是一个用于移动端的菜单按钮实现方式。...二、CSS 部分 代码功能概述 这段代码是一个 CSS 媒体查询，用于在视口宽度小于等于 800px 时（通常是移动设备屏幕），对页面的布局和样式进行调整，以实现响应式设计。...PC 端样式设置：为导航菜单、菜单项、下拉菜单以及页面内容的各个元素设置默认样式，使页面在 PC 端呈现出预期的布局和外观，如菜单水平排列、课程内容采用网格布局等。...菜单交互实现：通过 CSS 选择器（如 input.menu-btn:checked ~ .collapse）或编写 JavaScript 代码，实现点击菜单按钮展开和收缩菜单的交互效果。 5.
开源地址：https://github.com/hustvl/TopFormer 1背景 为了使ViT适应各种密集的预测任务，最近的ViTs，如PVT、CvT、LeViT以及MobileViT都采用了分层结构...，类似的操作也用于卷积神经网络(CNNs)，如AlexNet和ResNet。...考虑到在移动设备上非常有限的计算能力，在这里使用一些堆叠的轻量级MobileNetV2 Block和Fast Down-Sampling策略来构建一个Token Pyramid。...然而，有研究表明MobileViT和其他ViT-based的网络在移动设备上明显慢于MobileNets。 对于分割任务，输入的图像总是高分辨率的。...为了进一步减少计算量，使用平均池化操作将不同尺度的Token数量减少到输入大小的 。来自不同尺度的集合Token具有相同的分辨率，它们被连接在一起作为Vision Transformer的输入。
Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使 Web 开发更加快捷。它对 HTML、CSS 和 JavaScript 进行了封装，使它们使用起来更方便。...Bootstrap 使用了一些 HTML5 元素和 CSS3 属性（如媒体查询）。为了让这些正常工作，需要使用 HTML5 文档类型。...4.1 简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...一行的总列数都是 12 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的...，当大于这些阈值时将变为水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 .container 最大宽度 None （自动） 750px
idealviewport为浏览器定义的可完美适配移动端的viewport，固定不变，可以认为是设备视口宽度device-width。...width=device-width表示页面宽度layoutviewport与设备视口宽度idealviewport一致 initial-scale=1表示页面宽度和网页宽度与设备视口宽度的初始缩放比例...user-scale=no禁止缩放 所以现在我们知道，这段在移动端常见的代码的意思，即将visualviewport和layoutviewport设置为idealviewport的值；这样我们在移动端就不会出现滚动条...视口单位 将视口宽度window.innerWidth和视口高度window.innerHeight（即layoutviewport）等分为 100 份。...vw : 1vw 为视口宽度的 1% vh : 1vh 为视口高度的 1% vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 和rem相比较，视口单位不需要使用js
在移动端我们经常可以在head标签中看到这段代码： 通过meta标签对的设置，定义了页面的缩放比例；要了解这些参数的意义，我们需要先知道几个视口宽度的意义。 ...所以现在我们知道，这段在移动端常见的代码的意思，即将和设置为的值；这样我们在移动端就不会出现滚动条，网页内容可以比较好的展示出来，在这个前提下我们再考虑页面的适配问题。 ...视口单位 将视口宽度window.和视口高度window.（即）等分为 100 份。 ...vw : 1vw 为视口宽度的 1% vh : 1vh 为视口高度的 1% vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 和rem相比较，视口单位不需要使用...顺序如下图所示，总之堆叠上下文会对定位关系产生影响。想要进一步可以查看不受控制的:fixed。 键盘弹出与使用属性的情况在移动端是很常见的，所以需要谨慎使用:fixed。
用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。 不要在移动设备屏幕上将按钮设置得太小，以免按下正确的按钮。 触摸目标的最小尺寸最好至少为44 x 44像素。...在下面的图中，我模拟了两个按钮的不同情况。在左侧，按钮更小，更远，用户需要更多的时间与它互动。在右侧，按钮大小更大，更接近于它的同级输入元素，这将使交互更容易、更快。 ?...在 HTML 中，可以使用for属性将标签与输入框绑定在一起。...解决方法： 删除元素的 padding，并将其移动到元素 通过添加display: block使a标签的宽度等于其父链接的宽度。...使用伪元素来增加可点击区域 仅通过改变元素的宽度和高度或使用padding，并不总是能够使可点击区域变大，这时候就需要伪元素救场了。
8）Qt::WindowMinMaxbuttonHint：显示最小化按钮和最大化按钮。 9）Qt::WindowCloseButtonHint：显示关闭按钮。 ...使能 处于使能状态的窗口才能处理键盘和鼠标等输入事件，反之，处于禁用状态的窗口不能处理这些事件。...窗口的使能状态也可能影响外观，比如处于禁用状态的按钮文本本身为灰色。 使能状态和窗口的可见性有相似的逻辑：禁用一个窗口同 时会使它的所有子窗口成为禁用状态。 ...系统产生的键盘、鼠标等输入事件将被发送给处于激活状态的窗口。一般来说，这样的窗口会被提升到堆叠层次的最上面，除非其他窗口有总在最上面的属性。... 事件被拒绝后的结果视具体情况而定，比如关闭事件被拒绝后，窗口将不会被关闭，而键盘、鼠标等输入事件被拒绝后会向上传播到父窗口。
例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。 或者，在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不同的状态： 元素完全隐藏并从文档流中删除。...image.png 稍后我们将对此进行讨论，以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。 style 元素 值得一提的是，有些元素的默认值是display: none。...它只是从视口中隐藏起来。 Clip Path 当在元素上使用clip-path时，它创建一个裁剪区域，该区域定义应该显示和隐藏哪些部分。...控制颜色和字体大小 虽然这两种技术不像我们前面讨论的那样常见，但它们可能对某些用例有用。 颜色透明 通过使文本的颜色透明，它将隐藏在视觉上。这对于只有图标的按钮非常有用。...-- --> 在上面的例子中，我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标，添加了aria-hidden。
https://web.dev/lcp/ 首次输入延迟 (FID) First Input Delay (FID) 测量用户尝试与视口交互时的响应时间。...操作可能包括单击按钮、链接或其他自定义 Javascript controller。FID 提供有关应用程序页面上成功或不成功交互的关键数据。...在您的光标到达那里之前，链接可能由于图像渲染而向下移动。CLS 分数代表了破坏性和视觉不稳定转变的程度，而不是使用持续时间来表示此 Web Vital。...使用影响(impact)和距离(distance)分数计算每个布局偏移分数。影响分数是元素在两个渲染帧之间影响的总可见区域。距离分数测量它相对于视口移动的距离。...与使用其他工具（如 Lighthouse）生成的值相比，值可能会有所不同。
框架中包含一个事件传播架构，提供了和场景中的图形项进行精确的双精度交互能力，如将场景时间传递给图形项，也可以管理图形项目之间的事件传播。...图形项可以处理键盘事件，鼠标事件，如鼠标按下事件、移动、释放及双击事件，还可以跟踪鼠标的移动。...场景绘制顺序：背景层->图像项层->场景层 场景作用: 提供用于管理大量图像项的高速接口; 传播事件到每一个图形项; 管理图像项的状态，如选择和处理焦点; 提供无变换的渲染功能，主要用于打印; 常用接口...图形项支持如下功能： 鼠标按下、移动、释放、双击、悬停、滚轮和右键菜单事件 键盘输入焦点和键盘事件 拖放事件 分组，使用QGraphicsItemGroup通过parent-child关系来实现。...视图的坐标 视图的坐标就是部件的坐标，视图坐标的每一个单位对应一个像素，原点总是在QGraphicsView视口的左上角，而右下角是宽高。所有的鼠标事件和拖放事件都是使用视图坐标来接收的。
想象有小型放大镜于较大的图像上从左向右滑动，一遍后再从左边重新开始（如打字机一般）。举例说，该移动窗口仅能识别一截短垂直线。三个暗像素相互堆叠。...卷积网络在输入时，不止仅卷积这项操作。 在经过卷积层处理后，输入信息会经过一次非线性转换，如tanh或者 rectified linear 单元。如此，可以将输入值压缩至-1到1之间。...该数字将是三个堆叠二维矩阵之一的元素。图像体由这些二维矩阵一起构成。 这些数字是输入卷积网络的最初原始感官特征，卷积网络意在上述数字中寻找显著信号，从而更精确地对图像进行分类。...激活映射图上的宽度（或列数）与过滤器在底层图像上移动的步数一致。因为步幅越大，步数越小，所以步幅大则激活映射图小。...最大池化与降采样 卷积网络的下一层有三个名称：最大池化、降采样和二次抽样。如卷积的方法一样，将激活映射图每次一个片块地输入降采样层。
网络图数据容量有限，并且当节点太多时会形成类似「毛球」的图案，使人难以阅读。...堆叠式条形图共分成两种： 简单堆叠式条形图。将分段数值一个接一个地放置，条形的总值就是所有段值加在一起，适合用来比较每个分组/分段的总量。 100% 堆叠式条形图。...条形通常从中心点开始向外延伸，但也可以别处为起点以显示数值范围（如跨度图）。此外，条形也可以如堆叠式条形图般堆叠起来。 推荐的制作工具有：jChartFX、Bokeh。 热图 ?...连接地图 (Connection Map) 是用直线或曲线连接地图上不同地点的一种图表。 连接地图非常适合用来显示地理连接和关系，也可以通过研究连接地图上的连接分布或集中程度来显示空间格局。...流向地图 (Flow Map) 在地图上显示信息或物体从一个位置到另一个位置的移动及其数量，通常用来显示人物、动物和产品的迁移数据。
当模态内容太长时，我们可以很容易地使区域可滚动。...例如，它们不会彼此堆叠，而不是堆叠其子项。 在这种情况下，最好使overflow: hidden将其隐藏在包装器上，然后向其添加border-radius，这样我们只需要设置一个地方就行了。...，每个按钮都有一个伪元素，该元素相应地过渡到左侧和底部。...在Chrome iOS上，我们需要手动滚动和移动内容。看下面的动图： ? 幸运的是，有一个属性可以增强滚动体验。...当使用像素值时，这将在视口宽度较小时引起问题。
网络图数据容量有限，并且当节点太多时会形成类似「毛球」的图案，使人难以阅读。...堆叠式条形图共分成两种： 简单堆叠式条形图。将分段数值一个接一个地放置，条形的总值就是所有段值加在一起，适合用来比较每个分组/分段的总量。 100% 堆叠式条形图。...条形通常从中心点开始向外延伸，但也可以别处为起点以显示数值范围（如跨度图）。此外，条形也可以如堆叠式条形图般堆叠起来。 推荐的制作工具有：jChartFX、Bokeh。...连接地图非常适合用来显示地理连接和关系，也可以通过研究连接地图上的连接分布或集中程度来显示空间格局。...流向地图 流向地图 (Flow Map) 在地图上显示信息或物体从一个位置到另一个位置的移动及其数量，通常用来显示人物、动物和产品的迁移数据。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
