先放效果图吧，登陆页面和操作页面，避免后面忘记操作，做个笔记～ ? ? ? ?...---- 一、起因～ 之前总有人找到我们组小伙伴让手动上传文件到CDN上，我们小伙伴cq一怒之下写了一个基于TK的自助GUI工具，我看了之后觉得这个还挺有意思，就用PyQt5重写了一个，加入了认证和页面美化...QPushButton如何去掉边框 图片自适应QLabel大小 使用ui文件生成资源文件 使用.qrc 生成资源文件 状态栏信息左右分屏展示 输入框提示信息置灰 输入框未输入信息时对应按钮为不可用状态 登陆页面和主页面的切换如何实现...简单的页面布局 四、关于打包相关知识点 Pyinstaller 工具打包PyQt5 Mac 下使用hdiutil命令创建dmg的安装包 五、参考文档 见第一条回复，在正文中贴链接简直是要丑死～ 六、...TODO 深入学习下QSS 看下PyQt5和QML的集成，因为这个可以实现Material Design风格的页面，页面已经很直观了 fbs工具使用学习 代码混淆，防止反编译，因为这里面涉及到CDN对应的
BFC是一个独立的布局环境，BFC 内部的元素布局与外部互不影响 可以通过一些条件触发 BFC，从而实现布局上的需求或解决一些问题 可以将 BFC 想象成一个工具，无需探究其定义，只要着重理解其功能（特性...即使存在浮动也是如此 BFC 的区域不会与 float box 重叠 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素...BFC特性 属于同一个 BFC 的两个相邻容器的上下 margin 会重叠（重点） 计算 BFC 高度时浮动元素也参于计算（重点） BFC 的区域不会与浮动容器发生重叠（重点） BFC 内的容器在垂直方向依次排列...特性中提到：BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。...1.3.3 阻止元素被浮动元素覆盖 两栏布局 .left { float: left; width: 100px; height:
BFC是一个独立的布局环境，BFC 内部的元素布局与外部互不影响 可以通过一些条件触发 BFC，从而实现布局上的需求或解决一些问题 可以将 BFC 想象成一个工具，无需探究其定义，只要着重理解其功能（特性...即使存在浮动也是如此 BFC 的区域不会与 float box 重叠 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素 计算 BFC...BFC特性 属于同一个 BFC 的两个相邻容器的上下 margin 会重叠（重点） 计算 BFC 高度时浮动元素也参于计算（重点） BFC 的区域不会与浮动容器发生重叠（重点） BFC 内的容器在垂直方向依次排列...特性中提到：BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。...1.3.3 阻止元素被浮动元素覆盖 两栏布局 .left { float: left; width: 100px; height:
---- INP 是否测量页面上最慢的响应速度 当用户访问页面时，他们可能会点击多个不同的UI元素。 INP将报告最慢的2%的UI响应。...❝交互重叠:在我们与一个元素进行交互后，在初始交互有机会「呈现下一帧之前」，我们与页面进行了另一个交互 ❞ 两个并发交互的示例 通过Chrome的DevTools性能分析器我们可以看到,初始的点击交互中的渲染工作会导致后续的键盘交互出现输入延迟...动画也是导致交互重叠而增加输入延迟的另一个来源。特别是，在JavaScript中的动画可能会触发许多requestAnimationFrame调用，这可能会妨碍用户交互。...「车到山前,必有路」.我们可以将事件回调中的工作分解为单独的任务。这可以防止集体工作成为一个长时间任务，阻塞主线程，从而允许其他本来需要在主线程上等待的交互更快地运行。...正如其名称所示，FID仅考虑用户与页面的「首次交互」。尤其对于长时间保持打开的页面，比如单页应用程序，这第一次交互可能不能代表整体用户体验。 INP通常衡量页面上最差的输入延迟。
解析 PDF 内容流：内容流是一系列绘制指令，定义如何在页面上呈现文本和图形。我们应该解析 PDF 以从页面对象获取内容流，识别文本运算符并读取操作数值。...相似字符区分不正确：PDF 中的字形 ID 以视觉方式存储字符，这可能导致提取过程中的误解。 原因 2：PDF 中的文本字体发生变化 字体识别是提取 PDF 文本如此困难的另一个主要原因。...这会导致在将 PDF 文本转换为其他格式时出现粗体、下划线和斜体等错误。 原因 4：文本布局重叠导致文本位置错误 PDF 中的文本通常以绘图命令的形式存储，而不是按阅读顺序存储。...文本与图像重叠：图像和文本混合的内容可能会导致文本模糊或错位。 页面坐标系：缩放或旋转页面可能会导致位置信息错误。...页外字符：PDF 包含的文本数据通常比页面上可见的内容多。 原因 6：图像或扫描 PDF 中的文本 既然提取 PDF 文本如此困难，那么提取图像文本肯定是个大问题。
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？...不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。...BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...总结 其实以上的几个例子都体现了BFC布局规则第五条： BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
页面对比工具，可以分为三种不同展现形式： chrome 插件：直接在开发页面上进行对比，设计稿覆盖到页面上，对比查看页面不同点 在线网站 / 客户端对比：通过上传实现截图和设计稿进行对比，增加一些参考线...2.2 copixel 官网：copixel 使用教程：使用教程 和上面插件的功能类似，将开发稿和设计稿进行重叠对比。 上传设计稿后，降低设计稿的透明度，可以动态改变尺寸、位置、大小。...更加直观，不需要专业技术，直接在开发页面上选中不同区域，实时展示区域内布局、文字背景颜色、间距、对齐方式、行高等相关样式属性。 另一个功能点是，可以直接选中网页的 icon，点击下载。...对于开发而言： （1）前期在开发还原页面时，把设计稿重叠到页面上，直观对比设计稿编码，开发效率更高。...（2）在开发完成，构建部署阶段，设计稿走查也可以成为构建的一个环节，在 CI 中配置一下对比工具，以文件形式导入设计稿，结合自动化测试工具 Puppeteer 等，生成页面截图，计算还原度百分比。
Box: CSS布局的基本单位 Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。...不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。...BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...总结 其实以上的几个例子都体现了BFC布局规则第五条： BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。...BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。...BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。...： 总结 以上例子都体现了： BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
可用于传统导航条、侧边栏导航、页内导航、翻页操作 4.aside：用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用 、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分...dropEffect、effectAllowed、types 方法：clearData、setData、getData、setDragImage 五、绘制图形 A.canvas元素的基础知识 1.在页面上放置一个...canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘，只是一个透明的区域，需要利用JS编写在其中进行绘画的脚本 2.要指定ID、width、height三个属性 3.相关api...destionation-out，只显示原图形不重叠的部分 source-atop，只显示新图片重叠及未被覆盖的原有图形部分 destionation-atop，只显示原图形重叠及未被覆盖的新图形部分....transform-origin:left|top|bottom|right|center，指定变形基准点，可多个参数联合设置，如左上 十九、CSS3中的动画功能 1.Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过滤到另一个属性值来实现动画功能
解答 定义 BFC（Block Formatting Context）格式化上下文，是盒模型的一种渲染布局，简言之可以理解为 一个独立的容器，不受外部影响，不影响外部。...垂直方向的距离由margin决定 和float元素区域分割开，不会重叠 计算BFC高度时，浮动元素高度也计算在内 独立的渲染容器，不受外部影响，不影响外部 作用 清除浮动 消除margin重叠 布局...bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。...不被浮动元素覆盖有很多用处。...nth-of-type(3) { overflow: hidden; /*创建bfc*/ height: 300px; background-color: red; } 防止字体环绕
[image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距...块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。...FC(formatting context)直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，并且容器元素不会影响兄弟元素的布局。...外边距折叠的规则是：当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向上的外边距会产生重叠 html I am paragraph one
然后我们定义了一个 parse 方法，这是 Scrapy 中的一个回调函数，当爬虫爬取到每个页面时，都会调用这个方法。...在这个方法中，我们使用了 Scrapy 中的选择器来提取电影名称和评分，然后使用 yield 语句将这些信息输出。...这只是一个简单的例子，Scrapy 有很多功能，比如处理 AJAX、自动跟进链接、使用代理等。 以学习kivy框架为例 Kivy 是一个用于开发移动应用、游戏和桌面应用的 Python 框架。...在 MyApp 类中，我们定义了一个 build 方法，这是 Kivy 中的一个回调函数，在应用启动时会调用这个方法。在这个方法中，我们创建了一个 Button 对象并返回它。...这只是一个简单的例子，Kivy 有很多功能，比如布局、触摸事件、动画等，你可以在官方文档中了解更多信息。
下面我们以购物类的应用为例子做分析： 1.单页面延伸 在购物类应用首页、店铺页面等内容展示型页面，开发者可以尝试通过“延伸布局”在同一屏内向用户展示更丰富内容。...任何新打开页面可以以新页面全覆盖形式打开，而不要采取替换当前组合页面中某一边的空间的形式出现（这种简单替换会提升用户对内容和当前所处状态的理解难度，增大迷失感）。...小视频的播放形式：保持视频播放的最大化，将原本重叠在视频上的文字和交互入口，转移到页面的边缘上，相当于从折叠态到展开态的转换过程中，对界面上的用户交互层元素（如各种入口、按钮等）做了相对拉伸型的布局变化...此种场景，还有一种轻量化模式，可以在小视频独占沉浸播放的模式下，采用推挤的手势，将一个类似于精简列表的单列视频流以边条形式拖入屏幕，从而更好地保持视频沉浸播放的状态。...4.直播+互动的组合页面 在折叠态中，互动内容会以浮层形式重叠在图像上，而且因为避免对直播图像的遮挡，文字内容的行数受控，得不到充分的展示，尤其在互动内容多，滚动速度快的情况下，互动信息展示不充分。
这些方案来源于一篇外国网站上的文章，是一个设计师凭借经验和查阅大量书籍总结而成，基本覆盖了网页 UI 设计的所有领域，发现它时正好我也在关注网页设计类的内容，于是就收藏了起来。...2.设计好用户的目光走向 简而言之，就是让用户知道，第一该看哪里，第二该看哪里，第三该看哪里 不要在页面中留下没有意义的留白区域 若非必要，尽量使用一列布局 以及使用元素重叠的方法，给用户一种连续感...他们点击一个项目来查找信息。然后他们将返回上一页以对另一个项目重复该过程。那就是可用性差。通过在主要页面上放置重要信息来最大限度地减少 pogo-sticking。...s5.让用户在新标签页中打开页面 很多用户都会页面停放。...s1.在适当的地方收集用户反馈 s2.为 404 错误增加创建警报 s3.识别用户弹跳的页面 如果一个页面获得了很多浏览量（但很少有独特的浏览量），那么仔细检查用户是否在该页面上粘住了 pogo
当前页 筛选器的状态 切片器，包括切片器类型和切片状态 可视化对象的选择状态，比如高亮的筛选器 排序 钻取状态 可视化对象是否隐藏 可视化对象的层次 可视化对象聚焦模式 所以呢，如果我们要在同一个页面上...不过，要在两个页面中进行来回切换，由于目前有了页导航，我们就需要来分析一下这两种方式在不同的场景中的优缺点了： 1.严格地在多个页面之间切换 当我们要做地仅仅从一个页面切换到另一个页面，比如有一个导航栏...优点是： ①减少在“显示”中隐藏和显示可视化对象的操作 ②无需关心更新书签 ③易于故障排除 缺点： ①需要创建更多的报表页，报表页面的内容重复基本是必然 ②性能不可避免地下降 3.不同的报表布局 很多时候...所以我们来总结一下在这两者之间进行选择时的困扰： 页面导航目前只支持按钮，那么如果你想用图片或者形状来导航时，你会选择在图片上覆盖一个空白按钮来伪装，还是直接创建一个书签？...当你面临在同一个页面上的多个可视化对象，一会隐藏这个显示那个，一会隐藏那个显示这个，你会选择创建一堆书签来切换，还是复制多个页面来实现？
用户可以在工具栏中选择需要使用的工具，例如添加按钮、文本框、下拉菜单、复选框等等。然后，用户可以将这些元素拖拽到画布上，进行适当的布局。...下拉菜单：可以设置一个下拉菜单，用户点击后会展开菜单选项。 模态框：弹出一个模态框，覆盖在当前页面上，用户需要在模态框中完成某项操作后才能继续使用页面。...滑动条：在页面上添加一个滑动条，用户可以拖动滑块来选择数值。 动态面板：可以设置一个面板，通过点击或其他事件触发面板的展开或收起，可以用来实现折叠菜单或者展开详情等功能。...点击切换：在页面上设置多个元素，点击其中一个元素后，其他元素会自动隐藏或者展开。 标签页：可以设置多个标签页，用户点击标签页可以切换展示的内容。...搜索框：在页面上添加一个搜索框，用户可以输入关键字进行搜索。
因为浮动元素脱离了文档流，所以容器只剩下2px的高，但是将容器变成BFC，添加代码overflow:hidden,就可以包含浮动元素了。...BFC 可以阻止元素被浮动元素覆盖(就不举例子了) BFC自适应布局模块间的间距(参考链接) 2.3、总结BFC的布局规则 1、内部的Box会在垂直方向，一个接一个地放置。...属于同一个BFC的两个相邻Box的margin会发生重叠 3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。...4、BFC的区域不会与float box重叠。 5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。...6、计算BFC的高度时，浮动元素也参与计算 总结 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 参考链接 深入理解BFC
基本概念：PDF和Word文档是二进制文件，除了文本之外还保存字体，颜色，布局等信息。...PDF中拷贝页面、旋转页面、重叠页面以及加密文件。...write()方法接受一个普通的以写二进制模式?打开的File对象。...(page对象)，在拷贝页面完成后，向PdfFileWriter对象的write()方法传入一个File 对象，例如使用下列语句即可实现新PDF的写入。...例如Page.rotateClockwise(90)将页面顺时针旋转90度。 叠加页面：PyPDF2模块可将一页的内容叠加到另一页上实现在页面上添加公司标志，时间戳或水印等。
在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。 在本文中，将介绍 CSS中 的 wrapper 布局，它们如何工作，如何使用它们以及何时不使用它们。...为什么页面上 wrapper 有必要的 通过多加一层 wrapper 布局，有很多好处： 使内容更具可读性。 没有多加一层 wrapper，文本和图像之类的内容就可以拉伸以占据整个屏幕宽度。...在大屏幕上，宽度90%太大了，我们可以使用媒体查询来覆盖它。...-- Content --> 不建议这样做，因为wrapper元素可以在另一页上使用，这可能会无意间破坏布局。...现在，你可能会问，为什么可以在一个页面上添加多个wrapper？ 在上面的HTML中，两个wrapper之间有一个元素。 在这里使用!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
