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

【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

像素，左右自动居中 */ margin: 100px auto; 设置盒子相对定位 : 盒子模型 内部 需要将 图片 使用绝对定位定位到 右侧 垂直居中 位置 , 则 子元素...密码输入框样式设置 : 设置 输入框 的 宽度为 370 像素 , 高度设置为 30 像素 , 右侧的 小图标 大小 预留 30 x 30 像素的位置 , 设置后的样式如下 : 设置 border...*/ /* 输入框宽度为370像素 */ width: 370px; /* 输入框高度为30像素 */...*/ /* 输入框宽度为370像素 */ width: 370px; /* 输入框高度为30像素 */...*/ /* 输入框宽度为370像素 */ width: 370px; /* 输入框高度为30像素 */

8210

HarmonyOS应用开发-低代码开发登录页

② 放置图标图片 如图，我们需要放置一个水平居中的应用图标： 思路：下面我们来实现登录页面的图标，我们需要创建一个行容器(Row)，然后拖一个图片组件(Imgae)进去，并使图片居中。...操作：在列容器(Cloumn)里拖一个行容器(Row)过去，宽度(width)设置为 100%，高度(height)设置为 100vp，设置水平居中、垂直居中，位置为绝对定位(Position)，距离页面上方...设置内容(Content)为 “用户登录”，字体大小(FontSize)为 26fp，字体对齐(TextAlign)为居中(Center)，文字组件框体大小(Size)为宽度 100%，高度 50vp，...效果图如下： 下一步，我们来制作两个输入框下面的 “短信验证码登录” 和 “忘记密码”。 拖一个行容器(Row)到文本输入框组件下面，设置行容器(Row)的属性。...低代码开发迅速、改动简单，ArcTS 则更方便自定义一些事件，拥有更好的扩展性。

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

    《iVX 高仿美团APP制作移动端完整项目》06 美食页商家推荐内容、分类、推荐商家制作

    ，不能覆盖对应的背景颜色： 我们在主要行中添加一个行命名为标题，并且设置背景色为透明，高度为 40px： 随后添加一个文本以及一个图标： 此时我们发现文本和图片垂直方向不一致...，直接设置标题这个行的垂直对齐属性为居中即可： 二、 内容行制作 接着我们查看内容部分的搜索框在一个白色背景并且圆角包裹的容器之中： 此时我们应该先创建一个行，命名为内容并且给予背景色为白色...接着找到对应的圆角区域给予圆角为 30px，并且取消底部两个圆角应用： 此时页面如下： 三、 搜索框制作 接着咱们往这个行中添加一个行，命名为搜索框： 再往这个搜索框中添加一个按钮和一个输入框...： 接着给予这个搜索框的背景色为透明，并且使搜索框的内容水平居中对齐，高度为包裹： 此时我们发现当前搜索框距离顶部太近，给予一个搜索框行的伤内边距即可： 在这一步最后，我们还需要把内容块的高度更改为包裹...，并且使其添加到该行之中： 此时发现轮播页高度太大： 更改其对应的高度即可，在这里更改高度为 100px： ： 随后我们点击轮播页上传对应的图片： 两张图片上传完毕后如图所示为结果

    92720

    《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作

    ： 接着咱们可以看到，这个标题中，左侧有一个图标，右侧有一个文本： 咱们在此可以在这个行中添加两个行，一个命名为左，一个命名为右： 此时我们可以清晰的看到，左右两行高度已经超过了当前父容器高度...，需要将高度同意设置为包裹，已经背景色为透明： 接着咱们在左侧添加一个图标，并且设置其宽高为 30px 30px，颜色为白色： 当然，大小也需要对其进行设置；接着咱们在右侧的行中添加一个文本...： 由于左行占据了部分大小的原因，右行的居中并不会完全居中，此时我们知道左行大小为包裹，那么其图标元素为 30 的宽，那么只需要美食文本往右侧偏离 30px 即可，设置左外边距为 -30px即可...： 此时文本将完全居中。...： 2.2 搜索框制作 接着我们需要制作搜索框内容： 我们在内容行下创建一个行，命名为搜索框，并且设置背景色透明、高度包裹以及水平垂直居中： 接着咱们在搜索框中创建两个元素，一个是输入框一个是按钮

    98620

    HarmonyOS学习路之开发篇—— Java UI框架（基础组件说明【一】）

    TextField提供了一种文本输入框。...bubble_widthbubble_heightbubble_left_widthbubble_left_heightbubble_right_widthbubble_right_height 文本气泡宽度文本气泡高度文本气泡左宽度文本气泡左高度文本气泡右宽度文本气泡右高度...line_height_num=“1.5” element_leftelement_topelement_rightelement_bottomelement_startelement_end 文本左侧图标文本上方图标文本右侧图标文本下方图标文本开始方向图标文本结束方向图标...② 按钮类 Button是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。...… =“inside” 表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。… =“clip_center” 表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。 未完待续…

    2K20

    三、登录页制作《iVX低代码无代码个人博客制作》

    ，高度为包裹，并且还可以设置一定的内边距： 接着再创建一个行命名为手机号验证，这个框用于存放手机号以及按钮，此时也需要设置这个框的水平方向的对齐为居中、高度为包裹： 接着在这个行内创建两个元素...，一个是输入框一个是按钮： 需要设置成以上形式，需要去掉对应元素的外边框属性，比清切使其统一高度，在此设置了两个元素的高度均为40、圆角取消： 接着按照此方法一次创建其他内容：...此时由于其内部的每一个行的水平内容都是设置为居中，我们需要内部元素的宽度一致才能对其，在此验证码输入框的宽度要等于手机号码和发送按钮宽度的综合。...： 随后 我们给予发送按钮创建一个事件，这个事件用于触发倒计时任务的触发器： 触发完毕后，在触发器中给予事件，触发后用于存储倒计时秒数的变量减1： 那么接下来如何使文本内容更改为描述呢...此时只需要在触发器中，添加条件，当秒数已经小于1时，那么发送按钮的文本就更改为发送： 但是此时还会出现一个问题，当前触发器还未停止，登录倒计时依旧在减1，此时还需要在小于0时停止当前触发器并且我还需要给予原本的秒数为

    1.2K20

    Row本身是不支持滚动，如何实现滚动

    Compose中可以使用LazyRow或LazyColumn,这部分内容之后会讲解到,敬请期待 verticalAlignmentment 取值有三个值: Alignment.CenterVertically 居中...Alignment.Top 靠顶部 Alignment.Bottom 靠底部 与上面一样,布局高度如果是自适应的,则不会有效果 复制Row(verticalAlignment = Alignment.CenterVertically...elevation: Dp = 1.dp, content: @Composable () -> Unit ) shape 形状,使用详见Jetpack Compose学习(3)——图标...(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 backgroundColor 背景色 contentColor 内容的背景色 border...边框,使用详见Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 elevation 阴影高度 复制

    1.8K30

    Infer Constraints，Autoconnect，ConstraintLayout拖拽使用教程

    此时，我们会发现，方形区域右上角出现一个 空心的三角区域，然后我们点击一下，就变成了实心的三角，并且方形区域右下方会出现 ratio 字样 和 一个 输入框，我们直接在输入框中 输入 宽：高 的比率并回车...在上图中，我们发现，而且properties面板中方形区域的垂直方向的两个小圆圈（把手）被直线连通了，表示：当前高度是0dp，高度的具体尺寸以宽度为基准。...注意： ratio 下方的输入框中，格式是固定的即—— 宽度：高度 （3）、宽高都是0dp（必看此处！！！）...，宽度的具体值以高度为基准）；然后，我们再点实心三角，此时已经退出了比率模式，但是ratio和输入框还在，但是输入内容也不会起作用；然后，我们再点实心三角，完全退出比率模式，三角标消失。...看下图： 如上图，当我们将光标挪到 properties 面板中方形区域的表示margin的数字上时，数字就变成了一个输入框和一个下拉按钮，点击下拉按钮会有预设的margin值，都是8 的倍数；也可以直接从输入框中输入我们想要的

    13810

    三、我的登录 栏制作《仿淘票票系统前后端完全制作（除支付外）》

    登录页面原版可以看见其中有一个 logo 居于正中间： 可以理解为一个行设置具体的高度，并且给予了垂直水平居中，而中间红色部分是 logo 区域，我们只需要创建一个指定大小的行，设置背景色就会居中...接着创建一个行，命名为 logo，设置背景色透明，高度为 150px，并且设置垂直和水平对齐为居中： 接着创建在 logo 下创建一个行，给予这个行 80*80px 打大小，设置其背景色即可：...随后制作登录信息内容： 1.2 登录信息制作 登录信息可以明显的知道，是一个行包裹，每行信息为一个文本和一个输入框，那么此时创建一个行命名为登录信息，背景色透明，高度包裹，水平对齐为居中：...一个用于验证码内容一个是号码内容，需要注意，设置垂直对齐为底部，为了方便其内容高度不一致导致的对齐问题： 接着创建一个输入框和一个文本： 想要使输入框有以上下划线效果只需要设置其父容器只显示下边距即可...接着给这个 if 容器一个条件，当 UID 等于 0 则显示此内容： 随后再创建一个 if 容器，用于判断 UID 不等于 1 则显示该部分内容： 我们可以重命名两个 if 容器，使其更清晰

    92430

    详解视觉误差对UI设计的影响和解决方案

    不是每个人都会有空给每个图标加个框来测量视觉尺寸的平衡，这里教个大家一个老司机才会的办法，搞个高斯模糊，如果高斯模糊之下每个图标看起来都差不多大，那么就可以说大致达成了视觉尺寸相等。 ?...这种现象与排列原则最常应用于按钮与输入框。 ? 左边的浅色背景输入框框体不会与标签文字对齐，框内文本才会与标签对齐。右侧的深色边框的输入框的框体就要与标签文字对齐，而框内容无需与标签文字对齐。...说完了水平居中，垂直居中也有非常多的细节要注意。...这里告诉大家一个东西，对于大部分操作系统而言或者说较为成熟的设计语言而言，垂直居中必定以按钮文字的首一位大写字母的高度开始算起，但在 Sketch 中，所有的文字都会默认地带上行距，所以在制作文字按钮时...大家都这样做的原因是在英文里面，有升部的字母(而大写字母的高度与升部字母的高度大体相似)(l,t,d,b,k,h)要多于有降部的字母(y,j,g,p)。 ?

    1.3K10

    【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 普通盒子模型中 , 设置垂直居中对齐时 , 直接设置 内容高度 = 行高 即可 ; 由于采用的是 CSS3 样式 , 该模式下 ,...设置的 height 高度 = 内容高度 + 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3 样式中 , 高度设置为...26 像素 , 其中包括了 24 像素的内容高度 , 2 像素的边框高度 ( 上下边框各 1 像素 ) ; /* 设置 高度 = 26 行高 = 24 像素 垂直居中 设置行高...= 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height...上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height: 26px;

    38020

    开发中的一些小知识点

    自己平时总结的一些开发中用到的小知识点 获得网站的图标： 网址 +　“/“ + favicon.ico 如获得淘宝网的图标 http://www.taobao.com/favicon.ico 网站图标一般放在网站的根目录下...元素的上边距的高度 = 14px X 1 = 14px，webkit指的是Chrome浏览器内核 li浮动后，ul将失去高度，如要设置ul整体背景需要定义好ul的高度 设置了定位的元素，在没有设置left...值和top值的情况下在原来的位置不变 text-align:center属性不仅可以使块级元素中的文本居中，还可以使块级元素中的行内元素居中 box-sizing: border-box浏览器使用IE盒模型的方式解析标签...提交按钮不能设置成，只能设置成 在同步提交中服务器端是通过标签的name属性获得标签中的值，例如在网页中创建一个密码输入框...[endif]--> 大部分主流浏览器浏览器中默认的字体大小都为16px direction: ltr将文本的显示方向设置为从右往左显示 flex-basis设置弹性盒的初始长度 当输入框中的单词拼写错误时

    47620

    【原创】CSS中的盒子模型以及设置元素居中

    pading: 20px; 内边距使用场景: 1.导航栏每个导航的文字个数不一样,设置a标签的宽高,会导致每个导航间的间距不一致 2.输入框设置输入时图标距离边框的距离...注意：块级元素的右外边距和设置无关 元素的高度： 内容区高度 + 左右内边距高度 + 左右边框的高度 + 左右外边距的高度。...块级元素左右居中(居中整个块级元素，非块级元素文字)： 选中需要左右居中的元素，然后设置左右外边距值为“auto”即margin：0,auto; 注意：需要设置左右居中的块级元素，必须设置宽度属性，且不能脱离文档流...元素上下左右居中(使用相对定位是实现。)...怪异盒子模型设置的width和height的属性值包含内容区+内边距+边框的宽度和高度。

    97920

    6详解AppBar小部件

    AppBar 包含各种属性，包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码将 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影，900即最暗和最亮50。...AppBar( backgroundColor: Colors.deepOrange[500], ), 图标主题 下面的代码将图标的颜色更改为绿色，将大小更改为36： AppBar( actionsIconTheme...工具栏高度和不透明度 最后，我们有工具栏属性。工具栏包含文字，图标，按钮，和其他任何公司的前景，除了小部件，如Container和Image。...、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了！...true, this.centerTitle,//标题是否居中 this.titleSpacing = NavigationToolbar.kMiddleSpacing,//标题与其他控件的空隙

    16.4K10

    uniapp开发微信小程序的坑

    这里图标的选择以及左右布局的大小对于强迫症的我纠结的比较久！ 3、聊天室 这里最坑的就是scroll-view组件，将聊天记录渲染完后，要跳到底部。...折腾半天，一开始是以为高度不能设置成百分比，我直接改成具体高度。好家伙，布局直接乱了。经过多次反复测试，发现有那么一个高度，恰好能滑到最低部。...心想每个手机的尺寸和高度肯定不一样，于是想着动态获取手机的可视高度减去底部tabbar的高度不就行了？问题直接解决。...输入框问题，一开始想着设置textarea自适应高度，根据输入的字数自动调节高度，在自己手机上调试的没问题，但是在不同手机上的初始高度不一样，很不美观，其次是发送按钮没有给固定高度，父元素也没有高度，导致垂直居中不了...于是算了，我直接给输入框固定高度把。至少美观一点。 突然想到，用户进入聊天室的时候，只需要返回最新的十条记录就行，用户上拉再继续请求数据。 4、我的 这里最纠结的就是背景颜色和图标的选择。

    1.1K00
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券