首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

最新iOS设计规范四|3大界面要素:视图(Views)

(Bars) 可以告诉用户在APP中当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索侧边、状态、标签、工具。...层适合大屏幕上,可以包含各种元素,包括导航、工具、标签、表格、集合、图像、地图和自定义视图。当层出现时,其他视图交互行为会被禁止,直到层被取消/关闭。...当用户点击取消按钮时才取消当前任务。 在屏幕适当位置显示层。箭头应尽可能直接指向触发它元素。因为层不能在屏幕上拖动,所以层不能覆盖屏幕上太多内容。也不能覆盖触发它元素。...在这种类型界面中,主要列显示侧边,可选补充列显示列表视图,辅助内容窗格显示有关所选内容详细信息。 在iPad上,使用拆分视图而不是标签。...这种样式适用于视觉上相似的列表。而加上子标题有利于区分行与行。 ? 右侧子标题:左对齐标题,右对齐子标题,位于同一行。 左侧子标题:右对齐标题,左对齐子标题,位于同一行。 ?

8.4K31

css布局使用

对主面板设置左右外边距,margin-left值为左侧宽度,margin-right值为右侧宽度。...设置两侧top值都为0,设置左侧left值为0, 右侧right值为0。 对主面板设置左右外边距,margin-left值为左侧宽度,margin-right值为右侧宽度。...通过负边距将浮动拉上来,左侧负边距为100%,刚好是窗口宽度,因此会从主面板下面的左边跑到与主面板对齐左边,右侧此时浮动在主面板下面的左边,设置负边距为负自身宽度刚好浮动到主面板对齐右边...通过引入相对布局,可以实现三布局各种组合,例如对右侧设置position: relative; left: 190px;,可以实现sub+extra+main布局。..."> 左侧边宽度固定 主内容宽度自适应 右侧边宽度固定

1.9K90

小结CSSfloat属性

实现原理: 侧边、中间内容区域元素设置向左浮动(float:left;),最下面的footer元素设置为清除左右两边浮动(clear:both;) 2.float属性值 float有四个可用属性值...clear: both;         } 4.2使用空标签清除浮动 还是以上述为例,侧边、中间内容区域元素设置向左浮动(float:left;),为了清除浮动,把侧边、中间栏外包一层父元素,然后在父元素闭合标签前...                      //中间                        4.3触发BFC 还是以上述为例,侧边、中间内容区域元素设置向左浮动(float:left;),为了清除浮动,给包含浮动元素父元素,设置overflow...             //中间               4.4clearfix(推荐) 给设置了浮动元素父元素,设置clearfix

1.2K50

快速上手Vue Router和组合式API:创建灵活可定制布局

假设我们正在构建一个博客,在该博客中,某些页面可能在主要内容两侧都有侧边: 其他页面只需要在内容旁边放置一个侧边,而且主内容前后位置可以变化。 而其他页面则根本不需要侧边。...选项1是为侧边创建组件,并根据需要在每个页面中包含它们。...--...--> 请注意,新路由器视图具有与我们提供给路由记录组件属性键相匹配名称属性( LeftSidebar 和 RightSidebar ) 最后,这一次页面本身可以完全排除侧边... 这可能看起来有点绕,但现在很酷是,有了这些额外命名视图,我们可以在任何新路由记录上灵活地添加一个或两个侧边。...: () => import('@/components/SidebarTwo.vue'), }, }, 左侧侧边 //router/index.js { path: '/posts/

1.2K10

Win系统好软推荐

页面清爽,功能强大,是学习时做笔记好帮手 ? 多种格式导出,很方便哦~ https://www.xmind.cn/ 附上链接地址,自行下载食用....特性介绍,可以出.在一些方面是遵循谷歌规范 ? 国外鸡肋网盘. CenterTaskbar ? 应用图标居中显示 有点Mac Dock味道?...从任务添加或删除图标时,图标将移动到中心或用户指定位置。您可以选择在各种不同动画之间进行选择并更改其速度。如果您不喜欢动画并希望它们立即移动,则可以禁用动画。...支持垂直任务 支持无限显示器 将任务样式更改为透明,模糊和丙烯酸 命令行参数 -stop将停止TaskbarX,将所有图标放回左侧并重置任务样式。...-cpo = 1将使主要任务居中。0被禁用。 -cso = 1将使辅助任务居中。0被禁用。 -as = backeaseout会将动画样式设置为BackEaseOut。“没有”是即时

1.5K40

腾讯开源超实用UI轮子库,我是轮子搬运工

QMUI_Android 功能特性 全局 UI 配置 只需要修改一份配置表就可以调整 App 全局样式,包括组件颜色、导航、对话框、列表等。一处修改,全局生效。...高效工具方法 提供高效工具方法,包括设备信息、屏幕信息、键盘管理、状态管理等,可以解决各种常见场景并大幅度提升开发效率。...控制子 View 水平对齐方向(左对齐/居中/右对齐)。 限制子 View 个数或行数。...QMUIPopup 提供一个层,支持自定义内容,支持在指定 View 任一方向旁边展示该层,支持自定义层出现/消失动画。...QMUIQQFaceCompiler QMUIQQFaceView 内容解析器,将文本内容解析成 QMUIQQFaceView 想要数据格式

4.7K30

CSS浮动

因为浮动可以改变元素标签默认排序方式。...元素不浮动(默认值) left 元素向左浮动 right 元素向右浮动 浮动特性 重要: 脱离标准普通流控制()移动到指定位置(动),俗称脱标 浮动盒子不再保留原先位置 如果多个盒子设置了浮动...作用:可以先确定父元素摆放位置,再在父元素盒子里放浮动元素,可以约束浮动元素在页面中显示位置 **Question!...**这里遇到了一些问题,当使用无序列表来做侧边时候,把小圆点取消了,但是它还占着位置 **A!...(清除左侧浮动影响) right 不允许右侧有浮动元素(清除右侧浮动影响) both 同时清除左右浮动影响 额外标签法 在浮动元素末尾加上一个空标签(块级元素),然后给这个标签清除浮动(关门)

2.2K30

【CSS】课程网站头部制作 ③ ( 搜索表单测量 | 搜索表单代码编写 | 代码示例 )

文章目录 一、搜索表单测量 1、左侧边界 2、文本输入框表单尺寸 3、文本输入框表单提示文本测量 二、搜索表单代码编写 1、HTML 标签结构 2、CSS 样式 3、输入表单效果 一、搜索表单测量...---- 1、左侧边界 搜索 , 大概结构如下 , 左侧是个文本框 , 右侧是个按钮 ; 导航文本 有 10 像素内边距 , 20 像素外边距 , 文本输入框 表单 , 距离 导航栏外边距有...65 像素 ; 2、文本输入框表单尺寸 左侧表单 高度 38 像素 , 边框 1 像素 , 左侧表单长度为 360 像素 , 测量 361 像素 , 减去 1 像素边框 ; 使用吸管工具...提示文本在 Input 表单中 value 属性中设置 ; 提示文本左侧 距离边框 有 20 像素 , 这里可以设置 20 像素内边距 ; 注意 : 设置内边距会拉长盒子 , 盒子尺寸要减去内边距...*/ margin: 30px auto; } .logo { /* 靠左侧浮动 */ float: left; /* 设置与 导航盒子 外边距 */ margin-right: 60px

1.9K30

【CSS】课程网站头部制作 ② ( 导航测量 | 导航编写 | 代码示例 )

文章目录 一、 导航测量 1、 左侧边界 2、 文本测量 3、 底部边框测量 二、 导航代码编写 1、 HTML 标签结构 2、 CSS 样式 3、最终显示效果 三、 完整代码 1、 HTML...标签结构 2、 CSS 样式 一、 导航测量 ---- 1、 左侧边界 导航左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航之间距离设置成...60 像素即可 ; 该边距可以设置为 logo 盒子 右外边距为 60 像素 , 也可以设置为 导航盒子 做外边距为 60 像素 ; 这里设置为 logo 盒子 右外边距为 60 像素 :....logo { /* 靠左侧浮动 */ float: left; /* 设置与 导航盒子 外边距 */ margin-right: 60px; } 2、 文本测量 选择 " 横排文字 "...垂直排列 , 且左侧有小圆点 ; 先清除默认列表样式 : /* 清除列表默认样式 ( 主要是前面的点 ) */ li { list-style: none; } 导航要设置左浮动 , 才能与 logo

3.8K20

vue系列教程之微商城项目|分类

描述 本文需要实现页面如下,点击左侧导航按钮,右侧自动滑动到对应位置。当滑动右侧内容,左侧导航也要做出相应变动。 ?...静态布局 顶部导航引入 fenlei.vue ? ? 引入侧边导航 结构大致如下,需要content-style占满屏幕中剩余空间,也就是除去顶部和底部导航空间. ?...遍历goods数组,将每个元素name放入侧边导航元素中 fenlei.vue ? ? ?...联动思路 通过监听'scrollEnd'事件,获取当前显示子元素索引,奖其赋值给this.activeKey,因为this.activeKey与左侧导航动态绑定,这样就完成了滚动右侧内容,左侧导航随之变化效果...赋值给wheel中selectedIndex属性,就完成了点击左侧导航按钮,右侧自动滚动到对应内容.完整代码如下 fenlei.vue ?

6.3K10

【CSS】1287- 一行 CSS 实现 10 种强大布局

我们在这里做是将最小侧边大小设置为 150px ,但在更大屏幕上,让它伸展出 25% 。侧边将始终占据其父级水平空间 25%,直到 25% 变得小于 150px 。...经典圣杯布局:grid-template: auto 1fr auto / auto 1fr auto 对于经典圣杯布局,有页眉、页脚、左侧边、右侧边和主要内容。...类似于以前布局,但现在有侧边! 要使用一行代码编写整个网格,请使用 grid-template 属性。这使您可以同时设置行和列。...,这里左侧和右侧边会根据其子项固有大小自动调整大小。...您可以看到,当我拉伸和收缩父尺寸时,这张卡片宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级中心,因为我们已经应用了其他属性来将它居中

4.6K20

解决iframe高度自适应

解决iframe高度自适应 原因 第一种方法 第二种方法 原因 iframe高度不会随着页面高度变化而变化,可能会导致页面显示不全,或者页面下方有空白问题。...第一种方法 这个方式更适用于嵌套页面,当嵌套多个iframe时,比如左侧有个侧边,右侧是个大iframe,这个大iframe又嵌套了一层:中间是iframe,但是右侧又有个侧边,这时候不想让iframe...frame.height(Math.max(mainheight, 350)); } }, 500);//每0.5秒检查一次 }); } catch (e) { } 第二种方法 这个方法更简单些,适用于左侧有个侧边...,右侧是iframe,并且iframe可以自己滑动,只在页面高度变化时重新赋值即可。...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

2.3K40

微信惊现类苹果手机「虚拟 Home 键」,等待 6 年多任务功能来了

现在就赶紧来体验这个最炫酷新功能,以及其它更新内容吧。 微信内页面都能使用「窗」 悬浮窗适用于微信内所有网页,但主要场景在于公众号文章。...当用户点击文章右上方「...」时,会新出现窗按钮,点击之后,该文章会被缩小为一个圆形图标,此后,无论用户处于微信那个页面,都可以直接通过窗打开这篇文章。...因为适用于所有微信内网页,所以除了文章,H5 页面也可以充分利用这个功能。比如,微信中「购物」、「游戏」也能采用悬浮。 此外,悬浮还有其它很多妙用。...然而,相比较而言,显然网页对于多任务迫切性会更大,因为此前小程序已经出现了下拉任务。 而接下来,在微信中,窗与拉下任务是否会互相适用于网页、小程序,值得期待。 还有哪些新功能?...只是 Android 版状态「朋友圈」3 个字居左,而 iOS 版本顶部状态居中。类似效果同样出现于公众号。 第二个则是需要继续优化案例。

84830
领券