首页
学习
活动
专区
圈层
工具
发布

趣学前端 | UI效果实战篇-按钮、布局、导航

鼠标经过的效果为边框和文字高亮,所以鼠标经过时设置边框和文字颜色为蓝色。 虚线按钮:虚线边框之前讲过,通过设置边框的格式为dashed实现,即border-style: dashed。...为按钮元素设置宽度width的值为100%,百分比是基于父元素宽度。 实现代码 码上掘金 布局 布局主要有两种,栅格化布局和Layout布局。...实现方案 类型 介绍 效果展示 实现方案 上中下布局 上:主导航放置于页面的顶端。 中:内容放在固定尺寸(例如:1200px)内。 下:一些网站信息放到底部。 设置flex布局。...因为上中下三部分是垂直展示的,所以 将父元素flex-direction属性的值设置为column。 这样子元素会呈垂直显示。 顶部-侧边&通栏-底部布局 顶部:主导航放置于页面的顶端。...左侧边和右侧内容水平展示,右侧的三个部分垂直展示。 实现代码 码上掘金 导航 Antd是这样定义导航的: 导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。

55510

Android 自定义标签 ViewLayout

, 还有我其实不会制作.9图,既然遇到问题,就换一种解决方式, 我们自己绘出来这个背景不就行了… 和上一篇自定义动画button一样,也就不到200行代码,我们就能绘制出来这个标签Layout, 链接如下...好的那么就来实现这个viewlayout 添加自定义属性 我们在attr里面提供了对外面暴漏的属性,可以方便我们改变一些UI上的值 增加默认的style文件属性 这个style意义其实并不是必须的,这个...这样就可以在onDraw中绘制了 接下来我们来绘制中间的虚线,大家都知道 paint画笔有一种虚线的模式 我们给画笔设置了Effecte 然后drawLine的时候在XML布局预览中发现虚线生效了,但是...path,由于计算的不够精确我就大概把对勾的起点放置到了我们刚才绘制的三角形的终点,对勾的绘制我跟UI沟通发现是一个十字架然后旋转,延伸了另外一条边, ok我们来计算这个path, 绘制这个对勾的path...有兴趣想要源码工程的同学,可以留言,我会上传到github后,把地址补充到评论中,包括上一篇的自定义动画view的源代码 谢谢各位捧场!!

1.6K100
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【技能】手把手教你用PPT排版免疫组化图

    1、新建一个PPT,去掉占位符(版式—空白,见第一讲),设计—幻灯片大小—自定义幻灯片大小,页面大小根据需要设置,比如我准备做一个杂志单栏大小的图片,并估计四张图片大约高7cm,所以我建立的PPT画布大小为...8.6cm×7cm(设置幻灯片大小这一步可以最后再做,见第二讲),如果最后建立的PPT画布看起来比较小,向上滚动滑轮变大就可。...6、把矩形填充改成无填充,把线条改成实线,颜色改成黑色,大小改成0.75磅(颜色和大小按照自己需要修改,还可以在短划线类型里面改成虚线),这样就做好了小视野的选框,把选框和大视野图片选中,右键-组合-组合...记得最后Ctrl+A全选所有元件,然后Ctrl+G组合,这样,加进去的文本框、矩形、虚线等元件不容易变乱。最后使用另存为,出图(见第一讲)。...这次作图的核心在于通过调整放大图层的透明度,在小视野图里面找准特定区域;在PS里面也差不多,也需要通过调整图层透明度去找到放大区域。

    5.5K11

    2018年4月26日 Go生态洞察:Go新品牌形象及标识发布

    正文 新品牌形象的诞生 Go的新品牌形象由品牌机构Within设计,他们在Renee French为Go打下的基础上进一步发展。...Go社区成员欢迎使用这个主题进行自己的演示。 演示文稿可作为Google幻灯片提供。我们选择Google幻灯片是因为它易于共享和维护更新。人们可以将其移植到Keynote、PowerPoint等。...幻灯片中的照片全部来自[unsplash](https /unsplash.com/),并根据unsplash许可发布。 使用幻灯片的说明: 在Google幻灯片上打开Go幻灯片主题。...文件 > “制作副本”(您可能需要先登录) 使用布局菜单中提供的布局创建新幻灯片。 使用包含的示例幻灯片来指导您的演示文稿的样式和创建。 下载 品牌指南、标志和主题由Go作者版权所有。...品牌书包含了关于标志使用的指南。 品牌书 (pdf) Go标志 (zip) Go幻灯片主题 (Google幻灯片) 接下来会发生什么 基于新设计,Go的网站将进行一次刷新。

    43510

    背包大乱斗与俄罗斯方块

    玩法分析 在空间规划与摆放方式上,俄罗斯方块是要将各种形状方块合理放置在游戏区域,通过移动和旋转来填满行以得分,背包大乱斗则要在有限背包格子内合理放置装备等物品,考虑其形状、属性和搭配来最大化利用空间;...,俄罗斯方块有七种四格方块,通过旋转和移动创造多样组合,背包大乱斗有多种装备等,通过合成、镶嵌等形成不同搭配; 游戏的动态变化性上,俄罗斯方块随着方块下落和消除游戏区域不断变化,玩家要随之调整策略,背包大乱斗在游戏中因新物品获取...、对手情况变化而使局势改变,玩家也需要及时调整背包布局和策略。...背包大乱斗本质上是俄罗斯方块机制的延展,从后者的空间利用、策略决策、形状组合和动态变化中获取灵感,深化空间放置与规划理念,发展出更复杂多样的内容,如物品属性和合成搭配,其动态变化也更具挑战性,给玩家全新体验...我们用虚线格填充这个基础单位,则有了下图,这样的好处是方便通过数据去描述这个单位长什么样子。

    31910

    如何快速制作放大图像效果?

    置入需要放大的图片。 ? 3. 右键选择椭圆工具,然后按住shfit键,在画布上画出一个合适大小的正圆形。 ? 4.编辑圆形图案。要求:图案无颜色填充;描边采用虚线(虚线间距自选、颜色自选)。...我自己常用的参数如下图所示。 ? 5. 选择图片,右键后再选择“排列”,将图片置于底层。同样的方法将虚线圆形置于顶层。然后拖动虚线框到图片中需要放大的位置。 ? 6....全选“图片+虚线圆框”,然后复制粘贴一个放在旁边。 ? 7. 全选右边的“图片+虚线圆框”,然后点击对象 → 剪切蒙版 → 建立。得到目标区域。 ? 8....按住Shfit键,将得到的小圆形图片放大到合适大小。然后和上面一样,选择描边、虚线等。具体设置如下图哦!做完这些,框选全部内容,建立编组,形成整体,以防止后面的操作移动图案。 ? 9....然后画出一条合适长度的虚线,并调整到合适位置,如下图。 ? 10. 选中线条,然后点击对象 → 变换 → 对称 ? 11. 在弹框中,选择“复制”。然后进一步将新得到的虚线移动到合适位置。 ?

    2.5K41

    HarmonyOS实战:快递信息时间轴效果实现

    前言快递信息时间轴在购物软件中是必不可少的功能,通过时间轴可以展示快递从发货到派送的每一个环节。本篇文章通过代码的形式详细讲解在鸿蒙日常开发中如何实现时间轴的效果。...字体颜色可根据状态的不同改变。提示文字可以根据具体情况是否显示时间轴上的虚线可以根据当前节点布局的高度动态改变。...最后一条虚线不显示,虚线可以通过设置布局边框的不同样式实现,这里使用的BorderStyle.Dashe。...同时虚线部分应该有最小高度,然后通过当前 Item 的高度变化动态改变虚线的高度,鸿蒙布局组件提供了 onAreaChange 方法用来监听当前布局高度的变化,通过修改最新高度来实现虚线的动态变化。...,然后就是如何实现虚线和布局动态高度变化同步,通过鸿蒙原生组件提供的方法可以实现。

    29210

    关于写作那些事之快速上手Mermaid流程图

    流程图布局方向,由四种基本方向组成,分别是英文单词: top(上), bottom(下),left(左)和 right(右).其中可选值: TB (从上到下),BT (从下到上),LR (从左往右)和...梯形 一般格式: [/node description\] ,[] 中括号嵌套 /\ 左右斜杠表示上短下长梯形形状,node description 是节点的描述文本....英文单词缩写 四种布局方向的值是英文单词首字母大写缩写形式,默认仅支持垂直方向....中文 英文 示例 图解 graph graph 流程图类型标识 子图 subgraph subgraph 嵌套子流程图标识 上 top TB 或 BT ,从上到下或从下到上的布局方向 下 bottom...BT 或 TB,从下到上或从上到下的布局方向 左 left LR 或 RL,从左往右或从右往左的布局方向 右 right RL 或 LR,从右往左或从左往右的布局方向 几何化形状 键盘符号形象化几何形状

    4.2K30

    【YOLO学习】召回率(Recall),精确率(Precision),平均正确率(Average_precision(AP) ),交除并(Intersection-over-Union(IoU))

    假设你的分类系统使用了上述假设识别出了四个结果,如下图所示: 那么在识别出的这四张照片中: True positives : 有三个,画绿色框的飞机。...在某种阈值的前提下(蓝色虚线),系统识别出了四张图片,如下图中所示: 分类系统认为大于阈值(蓝色虚线之上)的四个图片更像飞机。...如果一个分类器的性能比较好,那么它应该有如下的表现:被识别出的图片中飞机所占的比重比较大,并且在识别出大雁之前,尽可能多地正确识别出飞机,也就是让Recall值增长的同时保持Precision的值在一个很高的水平...所以在比较文章中Average Precision 值的时候,最好先弄清楚它们使用的是那种度量方式。 IoU IoU这一值,可以理解为系统预测出来的框与原来图片中标记的框的重合程度。...4,如果你发现文中的错误,欢迎留言指正,谢谢! 5,之后会继续把训练YOLO过程中出现的问题写在博客上。

    3.7K10

    使用VBA创建一份答题PPT

    一种实现方法是,在同一张幻灯片外放置每个空格对应的正确答案;然后,告诉VBA代码匹配这两个答案,也就是学生的作答和幻灯片外的文本,并评估答案。...步骤1:创建标题幻灯片 创建一个标题幻灯片,其中有一个含有“开始测试”文本的形状,示例幻灯片如下图1所示。当然,你可以在幻灯片中添加其他图片或形状来进一步美化幻灯片。...图2 步骤3:添加文本框 单击功能区“开发工具”选项卡“控件”组中的“文本框”控件,在幻灯片中绘制一个空白文本框并置顶,如下图3所示。...步骤4:放置正确答案 在该幻灯片外面,再插入一个“文本框”控件,将其名称命名为“CA”,并在里面输入正确答案,示例幻灯片如下图4所示。...End If End Sub 步骤6:将代码与幻灯片关联 在上图1所示的幻灯片中,选取含有“开始测试”文本的形状,单击功能区“插入”选项卡“链接”组中的“动作”按钮,在弹出的“操作设置”对话框中,选取“

    1.6K40

    DFX设计中如何减少Partition Pin的个数

    所有RM的输入/输出端口必然会有Partition Pin,布局工具会将Partition Pin放置在边界信号的某个节点上,如下图所示,图中白色高亮部分即为Partition Pin,左侧显示了这个Partition...实际上Partition Pin的出现会给布线带来压力,尤其是Partition Pin较多的时候,这是因为与之相连的边界信号其布线必须被固定下来,从而降低了布线工具在寻找最佳布线通路时的灵活性,这也是为什么我们建议尽可能降低...这可在RM2的布线结果视图中看到,这段走线以虚线方式呈现。同时属性IS_REUSE和IS_ROUTE_FIXED值为TRUE,表明该段走线是被继承被同一个RP下的所有RM使用且被固定下来的。...从PPLOC产生的原理我们可以想到减少PPLOC的一个方法就是尽可能将边界信号在静态区的负载放置在扩展布线区域内,这可通过画Pblock的方式实现。...我们画一个小的Pblock如下图中的红色方框所示,将与该端口相连的动态区的LUT放置在该Pblock内,可以看到这个Pblock是在扩展的布线区域内的。

    89510

    HDFS极简教程

    是根据google发表的论文翻版的。论文为GFS(Google File System)Google 文件系统(中文,英文)。...②运行在廉价的机器上。(商用机) ③适合大数据的处理。多大?多小?HDFS默认会将文件分割成block,64M为1个block。然后将block按键值对存储在HDFS上,并将键值对的映射存到内存中。...所以讲secondarynamenode,单独放置到一台机器上,可以增大冗余,但是有可能会丢失一小时内处理的数据。 ---- 工作原理 写操作: ? 有一个文件FileA,100M大小。...Client向nameNode发送写数据请求,如图蓝色虚线①——>。 c. NameNode节点,记录block信息。并返回可用的DataNode,如粉色虚线②———>。...②在执行读或写的过程中,NameNode和DataNode通过HeartBeat进行保存通信,确定DataNode活着。

    1.6K60

    3个用于从命令行进行演示的工具【Linux-Command line】

    键入“--center”,然后在文本上将文本居中放置在幻灯片上。...屏幕快照 2019-12-07 下午11.01.29.png 按下键盘上的箭头键在幻灯片中移动。...我之前提到的那些有趣而有用的惊喜呢? 可以通过以下方式在幻灯片上的文本中添加色彩飞溅效果:输入“--color”,然后输入要使用的颜色的名称,例如红色。...更进一步,你可以通过在“--beginshelloutput”和“--endshelloutput“之间放置命令来模拟键入命令。...Sent是围绕Takahashi方法构建的,用于介绍我在本文开头提到的方法。 Takahashi方法背后的核心思想是在幻灯片上放置一个或两个大字体的关键字。 关键字提炼了你在演示文稿中要传达的想法。

    3K00

    强大的Claude4.0+SVG绘制框架图,逻辑图和知识卡片-新实践案例参考

    知识卡片图绘制 对于知识卡片图的绘制,建议的方式是Html网页+SVG源代码的方式进行绘制。因为知识卡片上一般除了SVG图外,还有相关的标题,文字内容描述等信息。采用Html更加方便布局。...逻辑关系图 (Logic Diagram) **约束要求:** - 实体:矩形,主要实体用主色填充 - 关系:连线,不同关系类型用不同线型 - 属性:小矩形或椭圆,附着在实体上 - 约束:用文字标注在连线旁...具体的提示语约束我重点是在前面的基础上增加增加了独立的流程图绘制说明如下: ### 1....2 - 连接线:实线箭头,判断分支用虚线 - 布局:    1) 四个节点内:单行布局,从左到右进行布局    2)5到7个节点:分两行布局,两行之间活动连接线用直角折线进行连接    3)8到12个节点...右边文字上下左右都居中布局。左边矢量图标我希望色彩填充丰富点,同时矢量图标不需要边框,左边也不需要底色,矢量图最好选择正方形的矢量图。而且在左边区域居中布局,矢量图在左边部分填充占比在80%左右。

    1.1K10

    经典的计算机视觉项目–如何在视频中的对象后面添加图像

    观看下面的视频-左半部分是原始视频,右半部分上的logo出现在舞者后面的墙上: 这就是将在本文中实现的想法。 获取该项目的数据 我已从pexels.com(一个免费股票视频网站)上拍摄了此视频。...正如我之前提到的,我们的目标是在视频中放置logo,使其应出现在某个移动物体的后面。因此,目前我们将使用OpenCV本身的logo。您可以使用任何想要的logo(也许是您最喜欢的运动队?)。 ?...https://drive.google.com/file/d/1mXJtJOMTZYm-W6rQavdclbBUEuj3JL4v/view?...这些数组的值是像素值,每种颜色都有自己的像素值。因此将以某种方式将应该与矩形重叠的矩形的像素值设置为1(在图5中),而将矩形的其余像素值保持不变。 在图6中,用蓝色虚线包围的区域是放置矩形的区域。...创建图像蒙版的技术 框架尺寸比logo大得多。因可以在许多地方放置logo。但是,将logo放置在框架的中央来说似乎很完美,因为大多数操作将围绕视频中的该区域进行。

    4.5K10

    深度学习的异构硬件加速:TPU 特性与数据中心的 ASIC 应用(概述篇)

    二、TPU vs GPU:GPU在什么时候不达标 TPU(即Tensor Processing Unit,张量处理器),是Google针对深度学习相关应用而设计定制的ASIC。...然而对于GPU,其应用对象为通用并行计算,为了兼容更多的应用,在构架设计上存在一定的平衡和冗余,导致性能功耗比上相比于TPU并不占优势。...[1503891124068_2104_1503891124895.png] 图3 TPU2的整体部署,其中A、D为CPU机架,B、C为TPU2机架;其中蓝线为UPS,红色虚线为供电电源,绿色虚线为机架的网络切换配置...当然,处理规模的增加也会降低芯片的良品率; 面积:受到服务器板卡尺寸的限制,影响单卡上放置芯片的数量。芯片的面积不仅取决于内部处理构架的规模,还受限于芯片加工工艺,如20nm,16nm等。...成本:芯片制造的成本分为一次性投入的设计费用,和取决于数量的加工费用。其中前者比重较大。如Google在TPU的流片中,由于采用当时难度较高的28nm,设计费近千万刀。

    3.5K10

    计算机文化基础 第一部分 1.1 信息与信息技术 1.1.1信息与数据 信息的概念: 一般认为:信息是在自然界、人类社会和人类思维活动中普遍存在的一切物质和事物的属性。 信息能够用来消除事物不

    6.重设幻灯片  若需要取消或修改幻灯片中的样式,则可选中幻灯片单击右键,在弹出的快捷菜单中选择“重设幻灯片”命令,幻灯片将恢复到占位符的初始状态。...5.2.2 编辑幻灯片 1.占位符  占位符是一种带有虚线边缘的框,在该框内可以放置标题及正文,或者是图表、表格和图片等对象 1)选择占位符  将光标移至占位符的虚线框上,当光标变为四向箭头形状时,...2.输入文本  文本内容是幻灯片的基础,在幻灯片中输入文本一般有4种方式: 1)在占位符中输入文本  单击占位符内部,光标变为闪烁的 “| ”形状时即可输入文本 2)在“幻灯片/大纲”窗格中输入文本...在幻灯片中添加超链接的对象并没有严格的限制,可以是文本或图形图片,也可以是表格或图示。...由于安全和控制原因,并非所有的企业信息都能放置在公有云上,因此大部分已经应用云计算的企业将会使用混合云模式。  缺点: 因为设置更加复杂而难以维护和保护。

    4.9K21

    计算机文化基础

    6.重设幻灯片  若需要取消或修改幻灯片中的样式,则可选中幻灯片单击右键,在弹出的快捷菜单中选择“重设幻灯片”命令,幻灯片将恢复到占位符的初始状态。...5.2.2 编辑幻灯片 1.占位符  占位符是一种带有虚线边缘的框,在该框内可以放置标题及正文,或者是图表、表格和图片等对象 1)选择占位符  将光标移至占位符的虚线框上,当光标变为四向箭头形状时,...2.输入文本  文本内容是幻灯片的基础,在幻灯片中输入文本一般有4种方式: 1)在占位符中输入文本  单击占位符内部,光标变为闪烁的 “| ”形状时即可输入文本 2)在“幻灯片/大纲”窗格中输入文本...在幻灯片中添加超链接的对象并没有严格的限制,可以是文本或图形图片,也可以是表格或图示。...由于安全和控制原因,并非所有的企业信息都能放置在公有云上,因此大部分已经应用云计算的企业将会使用混合云模式。  缺点: 因为设置更加复杂而难以维护和保护。

    5.4K40

    工具:Slidev 使用指南:从入门到精通

    space:上一动画或幻灯片 up:上一张幻灯片 down:下一张幻灯片 o:切换幻灯片总览 d:切换暗黑模式 g:显示前往... 4.菜单功能 在预览 slidev 的时候,我们的鼠标在左下角 hover...matter),为每张幻灯片指定布局 (layout) 和其他元数据。...#2.代码块 建立 Slidev 一个非常重要的原因就是为了让代码在幻灯片中拥有正确的高亮。如你所见,你可以使用 Markdown 风格的代码块,以使得你的代码高亮。 ​...它们将展示在 演讲者模式 中,供你在演示时参考。 在 Markdown 中,每张幻灯片中的最后一个注释块将被视为备注。...例如,在 two-cols 布局 中,你可以采用左(default 插槽)右(right 插槽)两列的布局方式。

    2.1K10

    Python 自动化办公-玩转 PPT

    从技术上讲,可以在幻灯片上放置 9 种类型的形状: 形状 - 带有填充和轮廓的自动形状 文本框 - 没有填充和轮廓的自动形状 占位符 - 可以出现在幻灯片布局或母版上的自动形状,并在使用该布局的幻灯片上继承...获取幻灯片中的形状: shapes = slide.shapes 自动形状是规则形状。正方形、圆形、三角形、星星之类的。有 182 种不同的形状可供选择。...添加自动形状 以下代码添加一个圆角矩形形状,一英寸见方,并放置在距幻灯片左上角一英寸处: from pptx.enum.shapes import MSO_SHAPE from pptx.util import...幻灯片上的占位符可以为空或已填充。这在图片占位符中最为明显。未填充时,占位符会显示可自定义的提示文本。内容丰富的占位符在为空时也会显示一个或多个内容插入按钮。...纯文本占位符在输入文本的第一个字符时进入“填充”模式,并在删除文本的最后一个字符时返回“未填充”模式。内容丰富的占位符在插入图片等内容时进入填充模式,并在删除该内容时返回未填充模式。

    2.7K20
    领券