文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

11.HarmonyOS Next响应式导航栏实战：主轴方向与间距控制完全指南

本教程将详细讲解如何使用HarmonyOS Next的ArkUI框架实现一个能够在移动端和桌面端之间切换的响应式导航栏，重点关注Flex布局的主轴方向控制和间距设置。...这个变量用于控制导航栏的显示模式： false：桌面模式（垂直排列） true：移动端模式（水平排列） 3.3 模式切换按钮 Button('模式切换').onClick(() => { this.isMobile...（垂直排列） justifyContent：控制子组件在主轴上的对齐方式 使用FlexAlign.SpaceEvenly使子组件在主轴上均匀分布 alignItems：控制子组件在交叉轴上的对齐方式...移动端模式：ItemAlign.Center（居中对齐） 桌面模式：ItemAlign.Start（顶部对齐） space：设置子组件之间的间距 主轴间距：16像素 交叉轴间距：8像素 3.5...FlexDirection.Row : FlexDirection.Column 5.2 导航项的设计 导航项的设计应考虑在不同布局模式下的显示效果： 水平模式：图标和文字可以垂直排列，节省水平空间 垂直模式

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

    第133天：移动端开发的一些总结

    iphone5的 dpr = 2； DPI:打印机每英寸可以喷的墨汁点（印刷行业） PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度 目前，在计算机显示设备参数描述上，二者意思一致 计算公式：以iphone5...① 宽度不可控制，不同系统的设备默认值都可能不同 ② 页面缩小版显示，交互不友好 ③ 链接不可点 ④ 有缩放，缩放后又有滚动 font-size为40px等于pc上12px同等物理大小，不规范 3、 meta...以方案一为例，将pc端页面改成适应移动端的页面： 在移动开发过程中要学会做减法，一些不太重要的东西可以隐藏起来。 5、 使用什么布局？...可以使用 ① 响应式布局：responsive 高清图片 retina px em rem ② flex弹性盒子布局：高效居中方案 等比例填充列行 background-size font-size 多行文本溢出...:num;表示） ② 混合划分（有固定的像素（eg：100px）与flex:num;混合在一起） ③ 不定宽高的水平垂直居中： position：absolute； top：50%； left：50%；

    1.1K20

    我想推荐一本书 《CSS 世界》

    confirm确认框组件，需要同时兼容桌面端和移动端。...在桌面端呈现的时候，“确认”按钮是在左边，“取消”按钮是在右边，如图12-2所示。如果移动端访问，为了我们手指点击方便，产品经理希望“确认”按钮在右边，而“取消”按钮在左边，如图12-3所示。 ?...图12-2 桌面端 ? 图12-2 移动端 如果你来实现，你会如何处理这种不同设备、不同按钮顺序的问题呢？...改变 CSS 世界纵横规则的 writing-mode writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。...因为 vertical-rl 此时的文档流为垂直方向，rl 表示水平方向，此时再设置 direction:rtl ，实际上值 rtl 改变的是垂直方向的内联元素的文本方向，一横一纵，没有交集。

    1.6K10

    17个场景，带你入门CSS布局

    为了提高用户体验，在大的设备上，元素就显示的大一点，小的设备，元素就显示的小一点。主要有两种方式来实现：js配合rem实现和媒体查询。...代码如下： text-align: left; // 左对齐 text-align: center; // 居中对齐 text-align: right; // 右对齐 场景08 文字的垂直居中 单行文本和多行文本的垂直居中的处理方式不一样...单行文本的垂直居中。只需设置高度等于行高。如 height: 25px; line-height: 25px; 多行文本的垂直居中可以用 "场景12 多个元素的垂直居中" 中的方法。...场景09 多个块级元素的在一行或多行中显示 用 Flex 布局可以实现多个块级元素的在一行或多行中显示。Flex 布局的 Flex项目，会在一行中显示。...多行显示的方法是，在 Flex 容器上设置 flex-wrap: wrap。

    3.2K20

    【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解

    【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解一、前言：移动开发声明式 UI 框架的技术变革在移动操作系统的发展历程中，UI 开发模式经历了从命令式到声明式的重大变革。...根据华为开发者联盟 2024 年数据报告显示，HarmonyOS 设备激活量已突破 7.3 亿台，其中采用 ArkTS 声明式 UI 框架开发的应用占比达 68%，较 2023 年提升 45 个百分点。...根据华为 UX 设计规范，在屏幕适配场景中，相对布局的设备兼容性比绝对布局高 40%，尤其适合折叠屏等多形态设备。....对齐策略：VerticalAlign.Center（垂直居中）与 HorizontalAlign.Center（水平居中）组合使用，实现文本组件的屏幕中心定位。...该策略在不同分辨率设备上的定位误差小于 1px（基于 1920x1080 到 4K 分辨率的测试数据）。（4）数据交互与事件交互1.

    35600

    css布局 - 垂直居中布局的一百种实现方式（更新中...）

    帮多行文本找一个继父来领养他，让继父弥补父元素给他带来的伤害（行高和水平居中对齐的样式修改） 2. margin负边距简单处理一下底部小“裂痕” 三、父元素高度 不 固定时，单行文本 | 图片的绝对垂直居中...新增兄弟节点实力辅助，目标元素轻松上王者 四、父元素高度 不 固定时，多行文本的绝对垂直居中 1....二、父元素高度固定的多行文本垂直居中 这种效果其实和中间只有一个图片一个道理，因为你需要帮多行文本找一个继父来领养他，所以结构上就是这样： 1 2...他除了适用于这个弹层的场景，同样适用于其他场景的居中。因为即使不浮动，translate移动对兄弟元素没有影响。 请看： ? 这种现象和margin移动不一样。...在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性， 注意 IE6、

    4.1K10

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

    一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...设置的 height 高度 = 内容高度 + 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3 样式中 , 高度设置为...= 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height...设置行高 = 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中...设置行高 = 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中

    1.7K20

    【CSS】标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )

    3、文本行高与盒子高度关系 三、完整代码示例 代码示例 显示效果 一、标签显示模式示例 ---- 实现 横向导航栏 , 要求如下 : 每个导航按钮都有指定的宽高 , 有默认背景 , 鼠标移动上去背景和文字都会改变..., 显示的样式 ; 二、文字垂直居中 ---- 在 CSS 中没有文字垂直居中的 设置 , 需要结合 行高 和 元素高度 进行设置 ; 1、行高测量 单行文字显示 , 存在四条线 : 顶线 : 文字上边界...上边距 + 下边距 上边距 与 下边距 是 相等的 , 因此只要 盒子的高度 与 文本高度 相同 , 就可以做到文字内容垂直居中 ; 设置 文本的行高 等于 盒子标签 的高度 , 就可以实现 文本的...与 盒子高度 关系 : 文本行高 = 盒子高度 : 文本垂直居中 ; 文本行高 > 盒子高度 : 文本偏下 ; 文本行高 文本偏上 ; 之前的 文本样式 : 文本偏上 , 说明...默认状态 : 鼠标移动到链接上的样式 : 点击按钮 , 在新窗口中打开页面 :

    4.8K40

    CSS3 的视口单位vw、vh实现自适应（带有px，em，rem的简单介绍）

    一、px，em，rem，vw的简单介绍 ? 1、px px其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如显示器和打印机。...而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率，但是现在我们的桌面分辨率和物理分辨率几乎是一致的，因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。...二、使用vw，vh能做什么 1、响应式页面轻松搞定 由于vw，vh的特性，他们能够根据窗口大小来自动调节字体大小，这就能很轻松地完成响应式页面的布局 2、小技巧之响应垂直居中 可以使用vw，vh来实现在页面中响应垂直居中...margin-top +margin-bottom = 100 ，width + margin-left + margin-right = 100 ，就能够响应垂直居中。...所以我们可以在根元素上设置vw和vh，然后在根元素上限制最大最小值，然后配合body设置最大最小宽度。

    2.5K10

    Css 垂直居中

    在本篇攻略中，我们将探索现代 CSS 的强大威力，以全新的思路去攻克各种场景下的垂直居中难题。...请注意，有几种技巧十分流行，但在这里并不会深入探讨，原因如下： 1、表格布局法(利用表格的显示模式)需要用到一些冗余的 HTML 元素，实现起来不够优雅简洁，因此这里不多介绍。...3、在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因 为元素可能被放置在半个像素上。...Flexbox 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。举个例子，假设我们的结构代码是： Center me, please!...，在未来，对于简单的垂直居中需求， 我们完全不需要动用特殊的布局模式了。

    3.8K10

    CSS十问之元素居中

    ，遇事不决「flex/grid」 ❞ 文章概要 水平居中 垂直居中 水平&垂直居中 知识点简讲 元素分类 在CSS世界中，基本上分为「两类」元素 块级元素 行内元素 常见的块级元素有div/li/table...它的所有「子元素」自动成为容器成员，称为 Flex 项目Flex Item，简称"项目"。 同时，在容器上设置justify-content，该属性定义了项目在「主轴」上的对齐方式。...垂直居中 行内元素-垂直居中 针对行内元素的垂直居中，有分两种情况 「单行」垂直居中 「多行」垂直居中 单行垂直居中 例如，现在希望某个行内元素的文案在垂直方向居中显示。...针对多行元素在垂直方向的居中，通过在利用table元素的td的「默认」属性：即在垂直方向上vertical-align: middle; 我是一个多行文本信息...+ border-x等公式计算出，需要在垂直方向移动的距离。

    2.2K10

    一个Web二级菜单的实现(俺新手随便写的)

    （position: relative） （2）给二级菜单设置绝对定位（position: absolute），并设置左侧位移（left）的值为一级菜单的宽度，上放位移（top）的值为0 3、一级菜单的文字和二级菜单的文字水平居中显示...4、一级菜单的文字和二级菜单的文字垂直居中显示 5、一级菜单的每一项和二级菜单的每一项有下边框，边框为点线（dotted） 6、一级菜单的最后一项和二级菜单的最后一项没有下边框（可以使用li:last-child...，二级菜单隐藏 2、二级菜单显示在一级菜单的右侧 一级菜单 1、一级菜单的文字水平居中显示 2、一级菜单的文字垂直居中显示 3、一级菜单的每一项有下边框，边框为点线（dotted） 4、一级菜单的最后一项没有下边框...二级菜单 1、二级菜单的文字水平居中显示 2、二级菜单的文字垂直居中显示 3、二级菜单的每一项有下边框，边框为点线（dotted） 4、二级菜单的最后一项没有下边框 效果 文本内容的下划线 */ white-space: nowrap; /* 强制文本内容在一行显示 */ }

    1.7K20

    经验分享：多屏复杂动画CSS技巧三则

    其次，帅气的翻屏动画并不是移动端专有，桌面端也适用。稍稍用力，桌面移动全适配，何乐而不为！ 技巧二、不同状态下的连续动画 有时候，动画可能不是一波流，分状态。...后来，进行了修改，内部动画元素整体居中，外部容器桌面端做左侧60像素偏移，于是，适配移动端时候，就正好是居中的啦。 ? ②. 定位方式为居中定位 所谓“居中定位”是相对“传统定位”而言的。...但是，我们有没有想过让容器里面的诸多动画元素也居中定位显示呢？...前面一步到位不挺好的，后面这样分两步走岂不是多余？ 在大多数情况下，我们的应用场景比较单一，或只需要玩转移动端，或只需要驾驭桌面端，此时，上面两种定位的优劣是看不出来的。...很显然，宇航员和火箭所在的容器不能是绝对定位，否则脱离文档流，不能和上面元素保持合适垂直间距同时垂直居中。

    1.5K20

    经验分享：多屏复杂动画CSS技巧三则 - 腾讯ISUX

    例如上个月做的「企业QQ-新年祝福」活动： 感谢shirley帮忙录制上面的视频，虽然视频内容是手机上的显示效果，但是，这个“企业新年祝福活动”原本只针对桌面端，移动端是后来辅助增强（增加了相当于活动页面...其次，帅气的翻屏动画并不是移动端专有，桌面端也适用。稍稍用力，桌面移动全适配，何乐而不为！ 技巧二、不同状态下的连续动画 有时候，动画可能不是一波流，分状态。...后来，进行了修改，内部动画元素整体居中，外部容器桌面端做左侧60像素偏移，于是，适配移动端时候，就正好是居中的啦。 ? ②. 定位方式为居中定位 所谓“居中定位”是相对“传统定位”而言的。...前面一步到位不挺好的，后面这样分两步走岂不是多余？ 在大多数情况下，我们的应用场景比较单一，或只需要玩转移动端，或只需要驾驭桌面端，此时，上面两种定位的优劣是看不出来的。...很显然，宇航员和火箭所在的容器不能是绝对定位，否则脱离文档流，不能和上面元素保持合适垂直间距同时垂直居中。

    1.8K20

    解密CSS单位：px、em、vh的区别与应用

    它是相对于显示器屏幕分辨率的长度单位，通常被用来描述元素在屏幕上的大小和位置。...以下是 “vh” 单位在移动端设计中的应用以及实现全屏布局效果的方法： 在移动端设计中的应用： 字体大小： 使用 “vh” 单位可以确保字体大小随着视口大小的变化而调整，以适应不同大小的移动设备。...垂直居中： 使用 “vh” 单位可以实现垂直居中效果，例如将一个元素的上下内边距设置为 50vh，即可使该元素在视口中垂直居中。...影响： px 单位的元素尺寸固定，不会随着用户设备的分辨率变化而改变，可能导致在不同大小的屏幕上显示效果不一致，不够灵活。...3. vh 单位： 使用情况： 需要相对于视口高度进行布局的情况，如全屏背景、垂直居中元素等。

    47710

    前端面试之CSS重点概念精讲

    :inline-inline ❝「块级盒子负责结构,内联盒子负责内容」 ❞ 内联元素 如何区分内联元素 从「定义」上：内联元素的内联特指外在盒子 从「表现」上：可以和文字在一行显示 幽灵空白节点 在H5...-webkit-line-clamp: n：和①结合使用，用来限制在一个块元素显示的文本的行数(n) -webkit-box-orient: vertical：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式...结构，我们想实现元素内文本，在垂直方向居中显示 我是一个多行文本信息 bala bala 利用display:table ....justify-content属性 justify-content属性定义了项目在「主轴上的对齐方式」。...之所以叫硬件加速，就是因为「合成层会交给GPU（显卡）去处理」，在硬件层面上开外挂，比在主线程（CPU）上效率更高。 利用硬件加速，可以把需要重排/重绘的元素单独拎出来，减少绘制的面积。

    3K30

    【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

    文章目录 一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例...盒子模型居中显示 : 此处涉及到了 顶部的 Banner 图片 , 和 下方的 导航栏 需要居中显示 , 设置 margin: auto; 和 margin: 0 auto; 都可以实现该效果 ;...; 5、设置文本水平垂直居中 设置 text-align: center; 样式 , 可以使文本水平居中 ; 设置 行高 = 内容高度 , 可以设置文字垂直居中 ; /* 设置链接尺寸 */...使用伪类选择器 , 这里使用的是链接伪类选择器 , 设置的是链接在鼠标经过时的样式 ; /* 设置鼠标移动到链接上的样式 */ .nav ul li a:hover { /* 鼠标移动上去切换一个背景图片...: 鼠标移动到第一个选项后的效果 ;

    3K20

    【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

    将 div 中的内容水平居中显示 , 设置如下样式 : /* I. div 内部的 a 链接标签水平居中 */ .nav { text-align: center; } 3、设置链接标签默认显示样式...这里将 标签 也设置成 120x50 大小 ; width: 120px; height: 50px; 文字水平居中 , 通过设置 text-align: center; 即可 ; 文字垂直居中 , 需要将行高与文本高度设置成一致即可...: none; /* 文字 垂直居中 行高与文本高度一致 */ line-height: 50px; /* 背景图片设置 - 简写 */ background: url(...: none; /* 文字 垂直居中 行高与文本高度一致 */ line-height: 50px; /* 背景图片设置 - 简写 */ background: url(...edu.csdn.net/">学习 社区 2、效果展示 默认状态效果 : 鼠标移动到按钮上之后的效果

    5.7K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券