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

CSS第五天-定位

静态定位:static 定位的默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来的位置,进行定位 没有脱标,在页面还占有位置 天生就是给绝对定位爹用...---- 边框圆角:border-radius 让盒子四个角变圆润 数字+px 、百分比 (从上、右、下、左) ---- 垂直对齐方式:vertical-align baseline 默认 top 顶部对齐...这张大图片称之为精灵图 减轻服务器的压力,提高页面加载速度 ---- 背景图片大小:background-size background-size:宽度 高度 /百分比 contain 等比例缩放 cover 背景图片等比缩放...需要去测量 定位元素 === top:50% 50% translateY(-50%) 行内元素、行内块元素、并列关系的垂直居中对齐 设置vertical-align: middle ---- 垂直的用法: 文本框和表单按钮无法对齐...input和img无法对齐 div文本框文本框无法贴顶问题 div不设高度由img标签撑开,此时img标签下面会存在额外间隙问题 使用line-height和vertical-align: middle

2.7K40

【Flutter 专题】65 图解基本 TextField 文本输入框 (二)

helperText 为文本框辅助标签,一般在文本框底部,提示性内容;helperStyle 为文本框辅助标签样式属性;与 TextField 是否获取焦点无变化; return TextField(decoration...errorText 为文本框错误提示信息,一般在文本框底部,设置 errorText 不展示 helperText,整体默认为红色;errorStyle 为错误提示信息样式属性;errorMaxLines...hasFloatingPlaceholder 设置 TextField 获取焦点 labelText 是否向上浮动;设置为 false ,获取焦点后 labelText 隐藏,不会向上浮动; return...alignLabelWithHint 用于 TextField 设置多行时,true 覆盖标签与 TextField 的中心对齐的默认行为,和尚尝试了多种情况下 true 和 false 状态,发现效果并不明显...小扩展 在实际开发,可能会随时需要关闭键盘,此时我们仅需监听一下即可;和尚监听一个文本输入框,输入字符长度大于 11 位即收起键盘; return TextField(controller

4.5K41
您找到你想要的搜索结果了吗?
是的
没有找到

HTML、CSS、JavaScript学习总结

alert(“web“);} … … 有多个html页面使用到相同的JS脚本,可以js代码封装到一个文件...作为分隔符,数组转换成字符串,separator为逗号等同于toString() • objArr.pop()返回数组最后一个元素值,注意:这里同时会将该元素从数据清除,即objArr.length...(onFocus)调用的函数: 清空卡号文本框 文本框失去鼠标焦点(onBlur)调用的函数: 判断格式是否正确 focus( )方法 再次获得焦点,即鼠标 光标回到卡号文本框 onMouseOver...文本框对象 • 文本框元素用于在表单输入字、词或一系列数字 • 可以通过 HTML 的 INPUT 标签的 type 设置为“text”,以创建文本框元素 文本框对象 – 事件处理程序 文 本 框...,则会调用 onFocus 事件处理程序 • 对象失去焦点或光标退出对象执行 onBlur 事件处理程序 • 修改文本框内容或改写下拉列表框的选项,则会调用 onChange 事件处理程序

3K20

2016.04第4周 群问题分享

方法三:图片转换为块级元素。转换img行内元素的特性为块元素,设置display: block;可以解决这个问题。 方法四:设置图片的浮动属性。...,背景也不同),需要将文本框的背景去除掉,并且背景设置为图片。...(border与background的设置) 在文本框获得焦点的时候,文本框外部会有不同的样式(根据浏览器而定),因此需要清除样式,设置outline: none; 即可。...input标签里面autofocus起什么作用 2016.4.25~2016.4.29 核心概念 input标签里面各种属性的作用 参考答案 autofocus属性是HTML5的新属性。...autofocus属性规定当页面加载元素应该自动获得焦点。 相关知识可以在HTML5学堂官网搜索“form表单”。

816140

用户不填表?那是因为你没用好这7个设计准则

无线端表单设计需注意的原则有如下7个: 原则 1:表单的交互设计应与用户输入数据的行为强兼容 确保表单所有字段没有被界面的任意元素遮挡,例如键盘唤起。...但请记住,操作滑块时调节轴上方的指示数字一定要给用户清晰的提示数据变动,这里也请考虑大手指操作时候会被遮挡住的场景,例如: ?...原则 3:表单的字段标签要么放置在字段上部要么使用浮动标签 字段标签告知用户这个字段的目的,清晰易懂的字段标签是让界面交互性提升的一个主要手段。...一旦用户点击文本框标签消失,因此用户无法仔细检查他/她写的是什么确实是为了被写入。占位符文本是视觉标签一个贫穷的替代品。 ?...另外,也可以使用浮动标签,确保他们填写了正确的外地用户。占位符文本默认情况下显示,但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐的标签的动画。

1.8K60

终于等到你,新的虚拟键盘API 即将到来,快来先睹为快吧!

这是一个具有以下内容的用户界面: Sticky header 固定头部 Sticky floating action button (FAB) 粘性浮动操作按钮 当用户焦点放在输入框上,虚拟键盘将会显示出来...浏览器向上滚动以使输入框在键盘上方,因此粘性标题和浮动按钮消失。 它看起来与以下内容相似: 这是移动浏览器的默认行为。...输入框处于活动状态,结账按钮位于虚拟键盘下方,因此被隐藏起来。 我们可以轻松地通过虚拟键盘API来解决这个问题。...浮动操作按钮 在这个例子,我们有一个浮动操作按钮,它位于页面的右下角。 键盘激活浮动按钮应该移动到键盘上方。就像第一个例子中一样,浮动按钮位于键盘下方。...键盘激活, max() 的第二部分起作用, bottom 的值变为键盘的高度。 Navigation 导航 导航位于 bottom: 0 。

28920

【译】W3C WAI-ARIA最佳实践 -- 布局

如果焦点位于的底部单元格上,则焦点不会移动。 Up Arrow: 焦点往下移动一个单元格。如果焦点位于顶部单元格上,则焦点不会移动。...可选地,如果焦点位于的底部单元格上,则焦点可能会移动到下一列的顶部单元格。如果焦点位于网格的最后一个单元格上,则焦点不会移动。 Up Arrow: 焦点向上移动一个单元格。...可选地,如果焦点位于当前列的顶部单元格上,则焦点可能会移动到前一列的最后一个单元格。如果焦点位于网格的第一个单元格上,则焦点不会移动。...如果输入框是个单行文本框,连续按 Enter ,会重置网格导航功能,或移动焦点到附近单元格的输入框。 如果单元格包含一个或多个组件,焦点放置在第一个组件上。...且仅组合包含三个或三个以上的控件,才能使用工具栏作为分组元素。 键盘交互 工具栏获取焦点焦点被设置在第一个可用控件上。

6.1K50

【译】W3C WAI-ARIA最佳实践 -- 表单

+ Enter: - 焦点位于一个具有子菜单的 menuitem 上,打开子菜单并将焦点放在其子菜单的第一个项目上。 - 否则,激活该项目并关闭菜单。...- (可选):焦点位于未选中的menuitemradio上,不会关闭菜单,选中聚焦的 menuitemradio,并取消选中同一组的任何其他已选中的 menuitemradio 元素。...- (可选):焦点位于一个具有子菜单的menuitem上,打开子菜单并将焦点放在其子菜单的第一个项目上。...- (可选):焦点位于一个没有子菜单的 menuitem 元素,激活 menuitem 并关闭菜单。...例如,如果把快捷键 Alt+U 分配给“向上”按钮,该按钮会将当前聚焦的列表项目移动到列表的较高位置,焦点在列表,按 Alt+U 焦点移出列表。

8.2K30

【愚公系列】2023年11月 Winform控件专题 TextBox控件详解

默认情况下,当用户按下Tab键文本框会将焦点移动到下一个控件,而不是在文本框插入制表符。如果要允许在文本框输入制表符,则将AcceptsTab属性设置为true。...HideSelection属性设置为true控件失去焦点文本框的所选文本将不再被高亮显示,而是和其他文本一样显示。...HideSelection属性设置为false,无论控件是否获得焦点,所选文本都将以高亮显示的形式呈现。在这种情况下,即使失去焦点,选中文本仍然可见和可复制。...该属性文本框的文本自动换行,以适应文本框的宽度。如果该属性设置为True,则文本框的文本超出文本框的宽度,文本将自动换行。...数据展示:TextBox控件绑定数据源,以显示数据。例如,TextBox控件绑定数据库的某个字段,以显示该字段的值。

42722

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

问:你知道在css,html的标签元素分多少不同的类型吗?...,这个表单控件会自动获取焦点 list 为文本框指定一个可用的选项列表,当用户在文本框输入信息,会根据输入的字符,自动显示下拉列表提示,供用户从中选择 pattern 用于验证表单输入的内容 novalidate...用函数为元素绑定事件,当事件发生,可以操作该函数的变量。...() 所有匹配的元素追加到另一个指定的元素集合 prepend() 每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素前置指定的元素集合 after() 在每个匹配的元素之后插入内容...before() 在每个匹配的元素之前插入内容 insertAfter() 所有匹配的元素插入指定的元素后 insertBefore() 所有匹配的元素插入指定的元素前 eq()获取第N

2.4K50

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

native 的虚拟键盘弹出input 文本框上提及其置顶显示 ---- 解决方案1:    在各个的input输入框用标签包起来,例如: <form action=”javascript:void(...以下代码用于直接文档流的元素移动到视区内,Android5.0+有效(只测了5.0和5.1,其他未知),IOS没测过。...解决方案3: //输入框获得焦点,文字隐藏 $(".targetInput").focus(function(){ $(".state_fixed").hide();...}) //输入框失去焦点,文字显示 $(".targetInput").blur(function(){ $(".state_fixed").show();...}) 解决方案4:(针对于Android部分手机不能用以上方法) 在Android代码设置: <activity android:name="com.ideal.studys.EditTime

1.1K20

HTML 基础

通用属性,大部分元素都会具备的属性 (1). id 定义元素在页面独一无二的名称 (2). title 鼠标移入元素上所提示的信息 (3). class 指定元素所引用的类选择器(CSS 中使用)..._self 默认值,在自身标签,打开新网页 ②. _blank 在新标签,打开新网页 (3). name 定义页面锚点 (4). 链接的表现形式 ①....以明文的方式提交数据服务器(数据会显示在地址栏上),安全性较低 b. 最大提交 2kb 数据 c. 向服务要数据用 get 方式 B. post 邮寄 a....文字 浮动框架,可以在一个浏览器窗口中同时显示多个页面文档的内容(在一个页面引入另外一个页面),内容可以为普通的文体描述,浏览器不支持元素显示该文本描述信息...(1). src 浮动框架要引入的页面 URL (2). width 宽度 (3). height 高度 (4). frameborder 浮动框架边框,如果不想要边框的话,可以设置为 0

4.2K10

前端(二)-CSS

1、样式 1.1 行内样式 行内样式 1.2 内部样式 CSS代码写在 的 标签 h1{color...-- 外部样式,引入使用link标签,写在head标签,是单标签,但是rel属性和href属性是必须的,且rel="stylesheet"是固定的引入外部样式才可以生效,href属性指定外部文件的资源路径...-- 选择器,基本作用是用于定位网页的元素,进行样式美化,选取的是一组元素,不是一定是单个; 标签选择器,语法:标签名{声明1:声明2...} -->/ h2{ color: #FF0000; }...val的元素 3、美化网页元素 3.1 dispaly 行内元素与块元素的切换 属性 说明 display:block 元素显示为块元素,前后有换行符 display:inline 元素显示为内联...(行内)元素,前后没有换行符 display:inlineblock 元素显示为行内块元素 display:none 元素隐藏 3.2 字体样式 属性 说明 font-family 设置字体类型(

1.8K20

知识点总结

(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界) 4.BFC的区域不会与float的元素区域重叠 5.计算BFC的高度浮动子元素也参与计算...水平居中:一个块要在环境水平居中,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。...其基线就是margin底边缘 如果盒子的行高设置为0,因为文字实际占据的高度是由行高决定的,行高变为0,文字高度的起始位置就变成了文字的垂直中心位置 top/bottom 对于内联元素,指的是元素的顶部...(2) 页面数据变更,生成新的虚拟 DOM 树,比较新旧两棵虚拟 DOM 树的差异。 (3) 把差异应用到真正的 DOM 树上。...最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存,以备下次别的用户查询,可以直接返回结果

79830

【愚公系列】2023年11月 Winform控件专题 Button控件详解

欢迎 点赞✍评论⭐收藏前言Winform控件是Windows Forms的用户界面元素,它们可以用于创建Windows应用程序的各种视觉和交互组件,例如按钮、标签文本框、下拉列表框、复选框、单选框、...同样,如果你有一个文本框控件,当你设置它的Enable属性为false,用户无法编辑文本框的文本内容。...如果TabStop设置为true,则该控件可以使用Tab键进行焦点设置;如果TabStop设置为false,则该控件无法使用Tab键进行焦点设置。...在Winform,大多数控件都具有TabStop属性,例如按钮(Button)、文本框(TextBox)、标签(Label)等。默认情况下,TabStop属性都是设置为true的。...另外需要注意的是,UseMnemonic属性为true,如果文本中有多个字符可作为快捷键,在显示只会显示第一个。

1.2K12

AngularDart Material Design 输入 顶

floatingLabel bool  标签是否“浮动”。 如果为false,则在文本输入框标签会消失。如果为真,则它会“漂浮”在输入之上。...inputAriaLabel String  用于辅助技术的标签需要可见标签,请使用label代替此标签。...label String  此输入的标签。 如果没有在文本框输入任何内容,则显示默认文本。当用户输入文本,它会消失。...floatingLabel bool 标签是否“浮动”。 如果为false,则在文本输入框标签会消失。如果为真,则它会“漂浮”在输入之上。...floatingLabel bool  标签是否“浮动”。 如果为false,则在文本输入框标签会消失。如果为真,则它会“漂浮”在输入之上。

5.2K40

html中下拉菜单(html做下拉菜单栏)

下面我们通过代码与案例接受select跳转菜 html5怎么实现div+css二级下拉菜单 1.外部为ul标签,在每个li里嵌套一个ol列表 2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位...3.设置ol的高为0,溢出隐藏 4.外部li标签:hover ,设置ol的高度。...在没有设置position属性,页面显示如下(见图1),T1并未遮挡住T2,但HTML5让导航栏固定顶部不动且不遮挡住下面的DIV方法如下: 1,首先在html,添加良好的导航内容。...3,在样式,首先在菜单定义一些样式。 4,此时,在运行页面,滚动条滚动后导航消失。...html select标签下拉框怎么指定只让显示5个 静态的数据:你写几个options就是几个选项 动态数据:把返回的数据取你需要的5个放到options中就行了呀 html5 + css3 做的下拉菜单在部分手机浏览器无法

11.3K40

从零开始学 Web 之 HTML(三)表单

4、表头 :位于 table 标签和 tr 标签之间 1 2 表头 3 <tr...disabled:文本框未激活 value:输入框的默认内容 placeholder:引导文字,文本框无文字并且未获取鼠标焦点显示引导文字,获取焦点或者输入文字隐藏引导文字。...PS:有多个单选框是如何设置只能有一个被选中? 只有 name 的值设置相同的时候,才能实现单选效果。...1、尽可能少的使用无语义的标签div和span。(比如使用p是段落标签) 2、在语义不明显,既可以使用div或者p,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利。...3、不要使用纯样式标签,如:b、font、u 等,改用 css 设置。 4、需要强调的文本,可以包含在 strong 或者 em 标签

2.9K30

从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动

2 20px 30px 60px 总结:不带单位,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。...获取焦点 ?...label for id 获取光标焦点(效果:点击label也可以选择文本框) 用户名:<input type="text" class="username...4、清除<em>浮动</em> 清除<em>浮动</em>不是不用<em>浮动</em>,清除<em>浮动</em>产生的问题。 问题:<em>当</em>父盒子没有定义高度,嵌套的盒子<em>浮动</em>之后,下边的元素发生位置错误(占据父盒子的位置)。...方法一 额外<em>标签</em>法:在最后一个<em>浮动</em>元素后添加<em>标签</em>。 clear: left | right | both /*用的最多的是clear:both;*/ ?

58040
领券