文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS Flexbox 布局完全指南 （一）：4000字，多示例讲解

卡片是一种在弹性容器内组合相关信息的页面设计方式，视觉上很像一种玩的卡片。 有很多使用卡片的优秀案例，其中一个常用的就是价格表。 ? 价格表模型 让我们来建一个。...由于子元素排列需要更大的宽度，所以子元素不能在父元素内排列时就会换行。 接下来我们给 .card 元素一个初始宽度。...这时，卡片会在页面的起始处对齐，并且竖向排列。 ? 卡片首部对齐 这有时可能满足你的使用需求，但大部分情况下，都不行。 Flex 容器的默认值 上面的布局效果是由于 Flex 容器的默认布局设置。...卡片在页面内靠左上角对齐，因为 justify-content 的值默认为 flex-start。 同时，卡片垂直拉伸充满整个父元素的高度，因为 align-items 的默认值是 stretch。...应用 .row\_cell — top 类可以让特定的元素在 row 内靠顶部对齐 你一定有在标识文本中给特定元素加上这个类。

4.4K20

Bootstrap基础学习笔记

设定文本小写 .text-uppercase 设定文本大写 .text-capitalize 设定单词首字母大写 .initialism 显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字...这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) .list-inline 内联列表样式。...注意使用bg-{...}不是理想的配色方案，不建议使用。 【卡片】卡片用于定义一块带圆角的区域。...bg-{primary、secondary、success、warning、danger、info、dark、light} 定义卡片的背景色,定义在卡片容器上 【边框】 .border 含有边框 ....触发元素要设置以下属性： data-toggle = "collapse" data-target = "#id" 或者链接的href代替此属性 href="#id" 触发下拉元素代码示例： <

4.9K31
您找到你想要的搜索结果了吗？
是的
没有找到

【软件开发规范七】《Android UI设计规范》

编辑 从父界面进入子界面，需要抬升子元素的海拔高度，并展开至整个屏幕，反之亦然。 ​编辑 多个相似元素，动画的设计要有先后次序，起到引导视线的作用。 ​编辑 相似元素的运动，要符合统一的规律。...** 图片上的文字 ** ​编辑 图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。 ​...小图标点击区域：48x48dp 侧边抽屉到屏幕右边的距离：56dp 卡片间距：8dp 分隔线上下留白：8dp 大多元素的留白距离：16dp 屏幕左右对齐基线：16dp 文字左侧对齐基线：72dp ​...编辑 **卡片集**是**卡片**的一个平面布局 ​编辑 即使在同一个列表中，卡片的内容和布局方式也可以不一样。 ​编辑 卡片统一带有2dp的圆角。...在以下情况考虑使用卡片： 同时展现多种不同内容 卡片内容之间不需要进行比较 包含了长度不确定的内容，比如评论 包含丰富的内容与操作项，比如赞、滚动条、评论 本该是列表，但文字超过3行 本该是网格，但需要展现更多文字

4.9K20

视差特效的原理和实现方法

+ 'px' box.style.bottom = e.clientY + 'px' }) 当鼠标在页面左上方（加入x和y坐标分别是 10 和 20），就设置元素在页面右下方...，推荐优先考虑使用 transforms 对元素进行移动等操作。 进阶版 好玩的交互除了移动元素外，还可以移动背景图位置、旋转元素等操作。 同时还需要考虑元素的 动画幅度。...比如本文的终极版效果： image.png 这部分的讲解都放在代码注释里，建议自己建一个项目来运行。 有不懂的地方可以在评论区交流讨论。...: 50% 50%; /* 使被转换的子元素保留其 3D 转换 */ transform-style: preserve-3d; /* 圆角 */ border-radius...*/ perspective: 1200px; /* 使被转换的子元素保留其 3D 转换 */ transform-style: preserve-3d; /* z轴偏移

2K30

鸿蒙应用开发-初见：ArkUI

通过justifyContent属性设置子元素在容器主轴上的排列方式默认相邻子元素是紧贴着的，也可以通过space设置子元素间的间距Column容器内子元素在主轴上的排列主轴方向：垂直向下Column(...通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf...：子元素在水平方向左对齐HorizontalAlign.Center：子元素在水平方向居中对齐HorizontalAlign.End：子元素在水平方向右对齐。...：子元素在垂直方向居中对齐VerticalAlign.Bottom：子元素在垂直方向底部对齐层叠布局（Stack）层叠布局主要用于实现基于Z轴的布局，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素...Flex组件的alignItems参数设置子组件在交叉轴的对齐方式，子组件默认使用Flex组件的对齐方式。

13310

iOS 设计规范

： 20px、24px、30px、40px（通常上下间距最小不低于16px，过小的间距会造成用户的紧张情绪） 一、内容布局 最常用的两种布局方式，列表式和卡片式 （1）列表式布局 「信息」页面通常采用列表式布局...（2）卡片式布局 每张卡片的内容和形式都是相互独立的互不干扰。 卡片本身一般是白色，而卡片之间的间距颜色一般是浅色，不同产品风格颜色可能不同。...双栏卡片布局形式，常见于图片信息为主导，每一屏显示至少4张卡片。...二、界面图片设计比例 常见图片尺寸比例：16:9、4:3、1:1、1:0.618(黄金比例)等 三、APP版式设计规范 对齐、对称、分组 四、文字设计规范 文字是APP中最核心的元素，是产品传达给用户的主要内容...在APP中字号范围一般在20-36之间（@2x）。iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。 36px： 用在少数标题。例：导航标题、分类名称等。

1.7K20

放弃绝对定位重学flex,这两个游戏让你爱上使用flex

大师兄也是一个传统的人，所以当然使用的是传统方式布局了~ 于是整个网页布局通篇下来，都是position搞的。 好s不s,我们的项目是响应式布局，卡片数量不固定，根据卡片数量排列方式又不一定！！！...要想使用它，就要给父盒子加上display:flex .box{ display: flex; } flex-direction 改变元素主轴方向 它有四个值可以选择 row（默认值）：主轴为水平方向...flex-wrap换行方式 默认情况下，所有的子元素都排在一条线，可以通过flex-wrap改变子元素的换行方式。...nowrap是默认不换行 wrap是换行，当子元素的宽度之和超过父元素的宽度时，自动换行 3. wrap-reverse换行，第一行在下方。...justify-content主轴对齐方式 align-items次轴对齐方式 通过 css-tricks 这个网站可以很好地通过图文的方式学习flex布局的基础语法 更多更详细的介绍，大家可以看这个网站

65720

JVM G1GC的算法与实现

[存活对象计数结束后区域的状态] 在计数的过程中，又新创建了对象 L 和 M，nextTAMS 和 top 之间的对象都会被当做存活对象处理，没有特意进行计数。...） 如果新的对象是在并发标记结束后被创建的，因为新对象是分配在 prevTAMS 和 top 之间的，所以后被当成存活对象处理。...G1GC 是通过卡表（card table）来实现转移专用记忆集合的。 卡表 是元素大小为 1B 的数组，堆中大小适当的一段存储空间（通常是 512B）对应卡表中的 1 个元素。...[转移专用记忆集合的构造] 每个区域都有一个转移专用记忆集合，是通过散列表实现的： 键：引用本区域的其他区域的地址 值：数组，数组元素是引用方的对象所对应的卡片索引 在上图中，区域 B 中的对象 b...因为转移专用记忆集合维护的是区域之间的引用关系，所以在转移时不用扫描整个区域就能找到待转移对象所在区域的存活对象。

1.3K30

nicegui布局细节补充——绝对定位，固定定位

只在滚动到指定位置才出现 点击按钮，即可立刻回到页面顶部，并且按钮消失 本节使用的 nicegui 版本为 1.4.21 绝对定位 专栏惯例：先说原理细节，再给出一个封装好的便捷方法。...这是因为卡片有一个规则，里面的 第一个 子元素设置的圆角会自动保持与卡片的圆弧一样。如果你尝试去掉 column 会发现设置的圆角弧度不起作用。 还有其他相关样式，后面会有独立的章节讲解。...布局相关样式不再展开说明，相关知识回看前面的章节 可以看到，每个元素会占据自身的空间。但我们希望数字图案可以脱离这种规则，它可以很容易放置在容器(卡片)任意角落。...卡片上方的空白，是我们设置的 padding 但是，定位的是元素左边缘和上边缘，现在我们希望元素本身往左边移动自身宽度的一半。...但是要记住的东西也太多了吧！ 我们可以参考别的 ui 框架做一些简单的封装。比如下方的函数功能： 原理很简单，两个参数 x 和 y ，范围 -1 到 1 之间。控制图形的绝对位置。

46610

实战！半小时写一个脑力小游戏

.memory-game是一个弹性容器，在默认情况下，里面的元素会缩小宽度来适应这个容器。通过把 flex-wrap的值设置为 wrap，会根据弹性元素的大小进行自适应。 ?...为了定位 .memory-card子元素，还要添加属性 position: relative，这样我们就可以相对它进行子元素的绝对定位。...每次元素被点击时都会触发 :active伪类，它引发一个 0.2秒的过渡： ? 翻转卡片 要在单击时翻转卡片，需要把一个 flip类添加到元素。...接下来对 .memory-card元素添加 transform-style:preserve-3d属性，这样就把卡片置于在父节点中创建的3D空间中，而不是将其平铺在 z = 0的平面上（transform-style...游戏中有12张牌，因此我们将迭代它们，生成 0 到 12 之间的随机数并将其分配给 flex-item order属性： ?

1.7K20

OPPO Air Glass开发

设计时，建议： 左对齐：左对齐的文本更容易快速浏览和阅读，如果有多行文本或相对复杂信息推荐使用左对齐。...居中对齐：居中对齐可以更容易获得用户的注意力，同时更有效地运用眼镜最佳成像区域，因此在简要的关键信息提示或错误引导等情况下推荐使用居中对齐。...由于这个空间的大小，要避免层级关系： 在air glass里，由于光机的特性，光线溢出；不建议UI元素分层叠加，这会很容易降低识别性，所以应减少甚至避免层级关系的使用。...由于黑色在光机中不发出光，所以黑色即是透明。推荐黑色(#00000)作为卡片的背景颜色，否则卡片上层的文字图标等UI元素会和卡片叠加在一起。...关键是圆滑边缘与锐利边缘之间的平衡，使图标具有平衡感和现代感。 绿色是不是没有啥科技感？ 使用渐变描边来显示这种层次感。 光机60FPS，但是传输的问题，只有5FPS，尽量不要使用动画。

80120

Vue 插槽之插槽内容学习总结

插槽内容使用方法介绍 父组件中引用支持插槽内容的子组件，形如以下(假设子组件为NavigationLink.vue) Your Profile... 然后在子组件 模板中使用,形如以下： 这样以后，当组件渲染的时候，子组件中的 将会被替换为父组件模板中，子组件起始标签和结束标签之间的内容--这里称之为“插槽内容”...font-awesome-icon name="user"> Your Profile 如果子组件 template 中没有包含一个 元素...，则父组件中，该组件起始标签和结束标签之间的任何内容都会被抛弃 应用举例 需求描述 自定义卡片组件，用于展示不同的内容，形式为 显示卡片标题和内容，卡片和卡片之间看起来需要有“分界条” Testpage.vue

57730

Flutter中构建布局 顶

使用MainAxisAlignment.spaceEvenly沿着主轴对齐列，以在每列之前，之间和之后均匀排列空闲空间。...行和列是两种最常用的布局模式。 行和列分别获取子窗口小部件的列表。 子小部件本身可以是行，列或其他复杂小部件。 您可以指定行或列如何在垂直和水平方向上对齐其子项。 您可以拉伸或限制特定的子部件。...在以下示例中，3个图像中的每一个都是100像素宽。 渲染框（在这种情况下，整个屏幕）宽度超过300像素，因此将主轴对齐设置为spaceEvenly在每个图像之间，之前和之后均匀分配自由水平空间。...渲染盒（在这种情况下，整个屏幕）的高度大于300像素，因此将主轴对齐设置为spaceEvenly将自由垂直空间均匀分配在每个图像之间，之上和之下。...Card摘要： 实现材料设计卡片 用于呈现相关信息的块 接受单个孩子，但该孩子可以是Row，Column或其他包含子级列表的小部件 显示圆角和阴影 卡片的内容不能滚动 来自材料组件库 卡片示例： ?

43K10

数据产品PRD设计经典四原则

设计理论中，最经典的莫过于亲密性原则、对齐原则、重复性原则、对比原则，虽然老但历久弥新。 一、亲密性原则 亲密性：将相关的内容或元素组织在一起，让用户可以更加直观地发现元素之间的关系。...，相反，如果所有指标全部全部在同一空间内，阅读者就需要自己做视觉上的拆分。...二、对齐原则 对齐：任何元素都不能在页面上随意摆放。每个元素应当与页面上的另外一个元素存在某种视觉联系，写PPT时要关注文字对齐、图片对齐等，对齐可以让页面的秩序感更强，而不是杂乱无章。...四、对比原则 对比：页面上的不同元素之间通过对比来突出差异，吸引用户。...对比不仅可以用来吸引眼球，还可以用来组织信息、清晰层级、在页面上指引读者，并且制造焦点 上图左侧所有文字颜色、大小都非常相近，很难区分出标题、段落及正文之间的关系，而右侧方案中，文字大标题通过字体颜色以及背景

65210

创建水平滚动的正确方式【CSS 网格布局】

使用 CSS Grid 网格布局方便我们控制元素之间的距离，无需进一步计算。...> * { grid-column: 2 / -2; } .app > .full { grid-column: 1 / -1; } .app 类元素下的子元素都会被“容器化”，它们都有 20px...带 .full 类名的子元素，将会占据全部视窗的宽度且没有内边距。 滚动容器 我们使用六个卡片来创建水平滚动容器，一次显示两张。...10px 的空间，我们在每一端引入空的伪元素： .hs::before, .hs::after { content: ‘’; } 伪元素 ::before 和 ::after 非常适合...伪元素能够参与网格化布局让人心存感激。 现在，我们实现了一开始在大纲中提到的特性。 注意事项 这项技术的一个注意事项是在 grid-template-columns 中对既定卡片数量的计算。

2.5K50

持续交付之基于YouTrack的产品看板驱动

看板方法的各种设计元素，为质量和过程中的问题提供了可见性，能够迅速暴露价值流中影响效能的问题，从而引导团队专注于解决问题以维护稳定的流动。...通过帮助软件团队建立稳定的工作节奏，实现始终如一的可靠交付，看板方法能够在开发团队与客户、相关部门、供应商、价值流下游合作伙伴之间建立信任关系，从而建立具有高度协作、高度信任、高度授权和持续改进特征的组织文化...它将任务分解成若干个用户故事卡片，卡片被认领后就可以进行开发到测试到发布的流转，这些过程集中在一张看板中，是不是非常有趣的事情？...业务规划层：按业务场景规划需求；对齐开发进度，迭代快速交付；形成业务闭环 产品交付层：开发任务向产品需求对齐，快速高质量的交付有用的需求，持续提升交付效率 业务规划看板 ?...基于看板需求排期，对齐开发进度，即时发现和出现问题，确保高质量和顺畅的需求交付 交付闭环流程 ? 当团队成员认领卡片后，可以将其拖拽到对应列，代表这个任务已经完成了上个过程，可以进入到目前的阶段了。

52620
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券