首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material Design — 提示框( Dialogs)

并非所有的选择,设置或细节都准许这种中断。 提示框的替代选项包括Menus与内联扩展,这两个都能保持当前的环境。...关闭提示框 提示框可以通过点击提示框外部或点击系统后退按钮(在Android上)来关闭。 有时候,用户必须做出选择动作后才能关闭提示框。...确认单个值 确认提示框可以使用列表以外的布局,例如日期选择器,但仍然专注于选定单个值(选择日期,但不选择时间和日期)。 ?...全屏提示框可用于满足以下标准的内容或任务: ·该提示框包含需要输入编辑器(IME)的组件(如选择器或form fields),例如键盘 ·当没有实时保存更改时 ·当app中没有草稿功能时(无法自动存到草稿...全屏提示框支持日期选择器 操作 在屏幕顶部放置全屏对话框的确认和离开操作。 确认 屏幕右上角的确认按钮使用描述性动词,例如:保存,发送,分享,更新或创建。

5.2K101

java学习与应用(4.1)--HTML、CSS

链接标签:a标签(属性href跳转URL[本地或网络](mailto:xxx@qq.com选项启动本地邮件),target属性_self本页面打开_blank新建选项卡) 块标签:span(包裹作用,默认无效果...,datetime-local日期和时间,email邮箱(带校验),number数字(校验)。...CSS样式表 CSS(Cascading Style Sheet层叠样式表), 内联样式:在标签内使用style属性,每个键值对使用:,之间使用;隔开。 内部样式:在head标签中定义style标签。...background复合属性(图片路径,是否重复,位置,等),border-radius设置圆角。vertical-alien垂直样式, 盒子模型:控制布局。...float浮动:多个div设置浮动,使得div在一行展示,属性有left,right,center等。

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

    用getDisplayMedia实现在Chrome中共享屏幕

    分享选择器是这里的关键元素。在没有Webstore安全网的情况下暴露给Web平台足够安全吗?...标签共享是此设置中特别关注的问题,因为它会分解跨域沙盒 在Firefox中共享屏幕 Firefox采取了不同的方法,将网站列入允许访问该API的白名单。...现在,Chrome网上商店正在删除内联安装,如本博文中所述。如果我正确地理解了声明,则会在另一个选项卡中打开Chrome WebStore。这会使得检测用户何时从Web应用程序安装扩展程序相当困难。...这在安全性和用户体验评论方面是一个不小的变化,这使得在9月12日截止日期之前发生这种情况令人怀疑。离Chrome 69在9月12日的稳定版本的节点是不到一个月的时间了。...在MediaStreamTrack上使用applyConstraints返回对getUserMedia的工作,并且可能会继续为getDisplayMedia执行此操作: 有关更多详情,请参阅规格问题。

    4.7K30

    Imooc之Html与CSS

    我要变成内联元素 内联元素特点: 和其他元素都在一行上; 元素的高度、宽度及顶部和底部边距不可设置; 元素的宽度就是它包含的文字或图片的宽度,不可改变。...实际上,块状元素都会以行的形式占据位置 ---- 流动模型(二) 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。...checked="checked" 时,该选项被默认选中 下拉列表也可以进行多选操作,在标签中设置multiple=”multiple”属性,就可以实现多选功能,在 windows...操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。...设置a{display:block;} 内联元素 内联元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

    6.8K20

    请避免犯这9个常见的 CSS “坏习惯”

    important 是 CSS 中的一个关键字,它可以帮助我们将属性值设置为比其他样式选项更重要。例如,如果您将 !important 声明应用于元素样式,那么该样式将覆盖该属性类别的所有其他样式。...这种情况在您尝试使您的网站对所有用户包括视力受损的用户(低视力患者)都可访问时经常发生。例如,您设置了一些颜色值,最终发现对于视力受损的人来说很具挑战性,无法产生共鸣。您可以使用 !...只有在测试或美化简单的HTML文件时才使用内联样式。以下是一些避免使用这种样式系统的原因: 使用内联样式,你无法遵循DRY(不要重复自己)原则。...这样可能很高效,但随着时间的推移,它们最终会导致选择器过于复杂。 7、忽略浏览器兼容性 浏览器兼容性很重要,因为你不希望样式在一个浏览器上良好运行,在另一个浏览器上则运行不正常。...如果自定义字体不可用,回退字体将是实施的选项之一。 利用Can I Use网站检查CSS属性在各种浏览器中的兼容性。

    30610

    5分钟快速回顾HTML CSS

    块级元素左右居中:先设置自身width;然后,margin: 0 auto; 2.内联元素(行内)[不支持width, height, margin上下,padding上下] 常用内联元素...span(无语义) 超链接标签 a src可以为空,但一定要写 其它常见问题 子级内联元素之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size 内联元素居中...:由于内联元素自身不支持width,使用在父级元素设置text-alian : center 的解决方案 3.内联块元素(支持全部样式的内联元素) 转换为内联块 设置样式 display:...inline-block; 其它常见问题 可以把内联块元素看做内联元素的进化版, 通过设置float属性也会将元素转换为内联块 通过定位属性fix, absolute都可以将元素转换为内联块 (二...有上左,上右,下左,下右,四种定位方式 元素自身未脱离文档流,依然占据了原位置 2.绝对定位(相对于父元素定位) 父元素设置 position: relative; 子元素设置

    1.3K90

    CSS小技能:常用样式属性、选择器分类、盒子模型

    --不推荐此方式,因为在一个站点里,在需要更改 CSS 时修需要改每个页面文件。--> 内联样式表存在于 HTML 元素的 style 属性之中,每个 CSS 表只影响一个元素。...)top:设置上边距 3)left:设置左边距 内外边距 margin: 外边距 padding:内边距 1.3 选择器 我们通过选择器来选中 HTML 文档中的元素,来样式化元素。...每个 CSS 规则都以一个选择器或一组选择器为开始,去告诉浏览器这些规则应该应用到哪些元素上。...选择器 说明 版本 :active 鼠标激活的元素 1 :hover 鼠标悬浮的元素 1 ::selection 鼠标选中的元素 3 /*在鼠标指针悬浮到一个元素上的时候选择这个元素*/ a:hover...: 块级盒子(block) 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width 和 height 属性可以发挥作用 内边距

    1.8K10

    如何编写一个 Vue JS 内嵌组件

    在 Vue 应用程序中使用 jQuery 插件的这种组合似乎是最无处不在的。 我们快速介绍一下如何使用日期范围选择器构建内嵌组件的例子,这个组件允许你选择开始日期和结束日期。...就算这么写,Vue 组件还是无法对所做的更改作出反应。(我们经常以为行得通却总因此折腾很久) 理解你的组件不应该超出组件的上下文是很重要的。 最好的方法是在组件上使用根元素来使用 this....我们提供了一个 on('apply.daterangepicker') 事件处理程序,它会监听触发开始和结束的 apply 的日期事件。 接下来,回调函数会在组件的实例上设置新的开始日期和结束日期。...我们还提供了一些开始和结束日期的 props,默认值设置了过去 30 天的日期范围。...就我看来,我希望日期范围选择器是一个可点击的按钮,但用户会因此无法通过表单输入来编辑日期范围。 为此,我们有一个组件在日期范围更新时发出事件。

    4K40

    前端开发需要知道的一些 CSS 属性选择器!

    div [title] 需要说明的是,它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样),而它们之间的空格意味着后代选择器,即选择具有该属性的元素的子元素。...注意:在大多数情况下,属性选择器中不需要引号,但是我使用它们,因为我相信它可以提高清代码的可读性,并确保边界用例能够正常工作。...,但这些内联样式我们又没修改。...你可以将其添加为第二个选项,但要确保它不是惟一的选项。...a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); } 诊断 这些选项用于帮助我们在构建过程中或在尝试修复问题时在本地识别问题

    1.8K20

    使用这些 CSS 属性选择器来提高前端开发效率!

    div [title] 需要说明的是,它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样),而它们之间的空格意味着后代选择器,即选择具有该属性的元素的子元素。...注意:在大多数情况下,属性选择器中不需要引号,但是我使用它们,因为我相信它可以提高清代码的可读性,并确保边界用例能够正常工作。...,但这些内联样式我们又没修改。...你可以将其添加为第二个选项,但要确保它不是惟一的选项。...a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); } 诊断 这些选项用于帮助我们在构建过程中或在尝试修复问题时在本地识别问题

    2.2K50

    要提升前端布局能力,这些 CSS 属性需要学习下!

    div [title] 需要说明的是,它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样),而它们之间的空格意味着后代选择器,即选择具有该属性的元素的子元素。...注意:在大多数情况下,属性选择器中不需要引号,但是我使用它们,因为我相信它可以提高清代码的可读性,并确保边界用例能够正常工作。...,但这些内联样式我们又没修改。...你可以将其添加为第二个选项,但要确保它不是惟一的选项。...a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); } 诊断 这些选项用于帮助我们在构建过程中或在尝试修复问题时在本地识别问题

    1.5K30

    日期控件laydate

    然后,我们使用LayDate的render方法来初始化日期选择器。通过elem选项,将日期选择器与输入框进行关联。在示例中,我们还使用format选项来设置日期的显示格式。...在这种情况下,我们将日期格式设置为"yyyy-MM-dd",即年份-月份-日期。常用配置选项 以下是LayDate中一些常用的配置选项:elem:绑定日期选择器的输入框元素。...:' + value); } });在上述示例中,我们设置了以下配置选项:使用elem将日期选择器与输入框进行关联。...使用format设置日期的显示格式为"yyyy-MM-dd"。使用range配置选项来选择日期范围。使用min和max限制可选日期的范围。使用theme设置选择器的主题样式为"molv"。...使用done回调函数在选择日期后打印选择的日期到控制台。

    1.5K20

    CSS:页面美化和布局控制

    目录 CSS概念 好处 CSS的使用:CSS与html结合方式 内联样式 内部样式 外部样式 CSS语法 选择器:筛选具有相似特征的元素 基础选择器 扩展选择器 属性 案例:注册页面 ---- CSS概念...CSS全称 Cascading Style Sheets 层叠样式表 层叠:多个样式可以作用在同一个html的元素上,同时生效 好处 功能强大 将内容展示和样式控制分离 降低耦合度。...解耦 让分工协作更容易 提高开发效率 CSS的使用:CSS与html结合方式 内联样式 在标签内使用style属性指定css代码 如:hello css选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一 语法:#id属性值{} 元素选择器:选择具有相同标签名称的元素 语法: 标签名称{} 注意:id选择器优先级高于元素选择器... 出生日期

    1.3K20

    浏览器解析 CSS 样式的过程

    通过内联 style 属性在元素上定义的样式被赋予一个等级,该等级优先于 块或外部样式表中的任何样式。如果 Web 开发人员使用 !...例如,从上表中,人会注意到用户的浏览器首选项设置优先 于Web 开发人员的设置样式。...内联方向:这是文本布局的方向,由元素的书写模式决定。 在拉丁语言中,这是水平轴,在 CJK 语言中,这是垂直轴。 块方向:此行为与内联方向完全相同,但与内联轴垂直。...或者它可以生成两个不同的位图,并允许合成程序仅在应用了该动画的层上执行动画本身。 在大多数情况下,浏览器将选择选项2并生成以下内容(我有意简化了Word Online为此示例生成的图层数量): ?...然后,它将重新组合剪辑位图在正确的位置,并处理脉动动画。这对于性能来说是一个很好的优势,因为在许多引擎中,合成程序是在它自己的线程上的,这样就可以解除主线程的阻塞。

    1.7K00

    HTML CSS 入门

    HTML 块和内联 在 HTML 中,您主要会遇到两种类型的 HTML 元素: 块元素用于通过将内容划分为连贯的块来构造页面的主要部分。...但是努力了一辈子,人生也没有显著的提升,就像报道里经常说的:某某在平凡的岗位上,勤勤恳恳工作了一辈子。   ...一些例子 组合选择器 我们重用之前的示例,该实例中,我们希望日期显示为红色: .date {   color: red; }   Saturday Feb 21 在我们的示例中,该段落将为**红色,**因为#id选择器比其他选择器具有更高优先级。 CSS 规则的顺序 如果您的 CSS 中有类似的选择器,则最后定义的选择器将具有优先权。...red important">,而是在语义上更具描述性; 不要使用像这样的内联样式 CSS 常用属性一览表

    5.2K20

    vue之组件边界情况处理

    不幸的是,使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地,它用到了两个新的实例选项:provide 和 inject。...例如,你可能经常看到这种集成一个第三方库的模式: // 一次性将这个日期选择器附加到一个输入框上 // 它会被挂载到 DOM 上。...mounted: function () { // Pikaday 是一个第三方日期选择器的库 this.picker = new Pikaday({ field: this....$refs.input, format: 'YYYY-MM-DD' }) }, // 在组件被销毁之前, // 也销毁这个日期选择器。...不过它们只能通过 name 选项来做这件事: name: 'unique-name-of-my-component' 当你使用 Vue.component 全局注册一个组件时,这个全局的 ID 会自动设置为该组件的

    1K50

    2019年底前的web前端面试题初级-web标准应付HR大多面试问题

    答:大体可分三种:1,块状元素,2,内联元素,3,内联块状元素 块级元素:就是每个块级元素都是从新的一行开始的,并且后面的元素也是另起一行的。 元素的高度,宽度,行高,顶和底边距是可以设置的。...元素宽度在不设置的情况,它的本身父容器是100%。...浮动float,就是让元素脱离文档普通流,浮动在普通流之上。 浮动元素,根据它设置的浮动方向向左或者向右,直到浮动元素的外边缘遇到包含框,或是另一个浮动元素为止,可以让文本和内联元素环绕它的。...time 生成第一个时间选择器 datetime 生成一个UTC的日期时间选择器 datetime-local 生成一个本地化的日期时间选择器 date 显示一个日期输入区域,可同时使用日期选择器...伪类选择器 伪元素选择器 属性: background-clip 设置背景覆盖范围 background-origin 设置背景覆盖的起点 background-size 设置背景的大小

    2.4K50

    二、CSS

    -- 对应以上一条样式,其它元素不允许应用此样式 --> 3、类选择器 通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。... 6、伪类及伪元素选择器 常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。...盒子占据一行、即使设置了宽度 内联元素 内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为: 支持部分样式(不支持宽、高、margin...它们在布局中表现的行为: 支持全部样式 如果没有设置宽高,宽高由内容决定 盒子并在一行 代码换行,盒子会产生间距 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height...,需要清除浮动 7、浮动元素之间没有垂直margin的合并 清除浮动 父级上增加属性overflow:hidden 在最后一个子元素的后面加一个空的div,给它样式属性 clear:both(不推荐)

    1.8K70
    领券