网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
计算
弹性云服务器 ECS
Flexus云服务
裸金属服务器 BMS
云手机服务器 CPH
专属主机 DeH
弹性伸缩 AS
镜像服务 IMS
函数工作流 FunctionGraph
云耀云服务器(旧版)
VR云渲游平台 CVR
Huawei Cloud EulerOS
云化数据中心 CloudDC
网络
虚拟私有云 VPC
弹性公网IP EIP
弹性负载均衡 ELB
NAT网关 NAT
云专线 DC
虚拟专用网络 VPN
云连接 CC
VPC终端节点 VPCEP
企业路由器 ER
企业交换机 ESW
全球加速 GA
企业连接 EC
云原生应用网络 ANC
CDN与智能边缘
内容分发网络 CDN
智能边缘云 IEC
智能边缘平台 IEF
CloudPond云服务
安全与合规
安全技术与应用
Web应用防火墙 WAF
企业主机安全 HSS
云防火墙 CFW
安全云脑 SecMaster
DDoS防护 AAD
数据加密服务 DEW
数据库安全服务 DBSS
云堡垒机 CBH
数据安全中心 DSC
云证书管理服务 CCM
威胁检测服务 MTD
态势感知 SA
认证测试中心 CTC
边缘安全 EdgeSec
大数据
MapReduce服务 MRS
数据湖探索 DLI
表格存储服务 CloudTable
可信智能计算服务 TICS
推荐系统 RES
云搜索服务 CSS
数据可视化 DLV
数据接入服务 DIS
数据仓库服务 GaussDB(DWS)
数据治理中心 DataArts Studio
湖仓构建 LakeFormation
智能数据洞察 DataArts Insight
应用中间件
微服务引擎 CSE
分布式消息服务Kafka版
分布式消息服务RabbitMQ版
分布式消息服务RocketMQ版
API网关 APIG
分布式缓存服务 DCS
多活高可用服务 MAS
事件网格 EG
开天aPaaS
应用平台 AppStage
开天企业工作台 MSSE
开天集成工作台 MSSI
API中心 API Hub
云消息服务 KooMessage
交换数据空间 EDS
云地图服务 KooMap
云手机服务 KooPhone
组织成员账号 OrgID
云空间服务 KooDrive
管理与监管
统一身份认证服务 IAM
消息通知服务 SMN
云监控服务 CES
应用运维管理 AOM
应用性能管理 APM
云日志服务 LTS
云审计服务 CTS
标签管理服务 TMS
配置审计 Config
应用身份管理服务 OneAccess
资源访问管理 RAM
组织 Organizations
资源编排服务 RFS
优化顾问 OA
IAM 身份中心
云运维中心 COC
资源治理中心 RGC
区块链
区块链服务 BCS
数字资产链 DAC
华为云区块链引擎服务 HBS
解决方案
高性能计算 HPC
SAP
混合云灾备
开天工业工作台 MIW
Haydn解决方案工厂
数字化诊断治理专家服务
价格
成本优化最佳实践
专属云商业逻辑
云生态
云商店
合作伙伴中心
华为云开发者学堂
华为云慧通差旅
其他
管理控制台
消息中心
产品价格详情
系统权限
客户关联华为云合作伙伴须知
公共问题
宽限期保留期
奖励推广计划
活动
云服务信任体系能力说明
开发与运维
软件开发生产线 CodeArts
需求管理 CodeArts Req
流水线 CodeArts Pipeline
代码检查 CodeArts Check
编译构建 CodeArts Build
部署 CodeArts Deploy
测试计划 CodeArts TestPlan
制品仓库 CodeArts Artifact
移动应用测试 MobileAPPTest
CodeArts IDE Online
开源镜像站 Mirrors
性能测试 CodeArts PerfTest
应用管理与运维平台 ServiceStage
云应用引擎 CAE
开源治理服务 CodeArts Governance
华为云Astro轻应用
CodeArts IDE
Astro工作流 AstroFlow
代码托管 CodeArts Repo
漏洞管理服务 CodeArts Inspector
联接 CodeArtsLink
软件建模 CodeArts Modeling
Astro企业应用 AstroPro
CodeArts盘古助手
华为云Astro大屏应用
存储
对象存储服务 OBS
云硬盘 EVS
云备份 CBR
高性能弹性文件服务 SFS Turbo
弹性文件服务 SFS
存储容灾服务 SDRS
云硬盘备份 VBS
云服务器备份 CSBS
数据快递服务 DES
云存储网关 CSG
专属分布式存储服务 DSS
数据工坊 DWR
地图数据 MapDS
键值存储服务 KVS
容器
云容器引擎 CCE
云容器实例 CCI
容器镜像服务 SWR
云原生服务中心 OSC
应用服务网格 ASM
华为云UCS
数据库
云数据库 RDS
数据复制服务 DRS
文档数据库服务 DDS
分布式数据库中间件 DDM
云数据库 GaussDB
云数据库 GeminiDB
数据管理服务 DAS
数据库和应用迁移 UGO
云数据库 TaurusDB
人工智能
AI开发平台ModelArts
华为HiLens
图引擎服务 GES
图像识别 Image
文字识别 OCR
自然语言处理 NLP
内容审核 Moderation
图像搜索 ImageSearch
医疗智能体 EIHealth
企业级AI应用开发专业套件 ModelArts Pro
人脸识别服务 FRS
对话机器人服务 CBS
语音交互服务 SIS
人证核身服务 IVS
视频智能分析服务 VIAS
城市智能体
自动驾驶云服务 Octopus
盘古大模型 PanguLargeModels
IoT物联网
设备接入 IoTDA
全球SIM联接 GSL
IoT数据分析 IoTA
路网数字化服务 DRIS
IoT边缘 IoTEdge
设备发放 IoTDP
企业应用
域名注册服务 Domains
云解析服务 DNS
企业门户 EWP
ICP备案
商标注册
华为云WeLink
华为云会议 Meeting
隐私保护通话 PrivateNumber
语音通话 VoiceCall
消息&短信 MSGSMS
云管理网络
SD-WAN 云服务
边缘数据中心管理 EDCM
云桌面 Workspace
应用与数据集成平台 ROMA Connect
ROMA资产中心 ROMA Exchange
API全生命周期管理 ROMA API
政企自服务管理 ESM
视频
实时音视频 SparkRTC
视频直播 Live
视频点播 VOD
媒体处理 MPC
视频接入服务 VIS
数字内容生产线 MetaStudio
迁移
主机迁移服务 SMS
对象存储迁移服务 OMS
云数据迁移 CDM
迁移中心 MGC
专属云
专属计算集群 DCC
开发者工具
SDK开发指南
API签名指南
DevStar
华为云命令行工具服务 KooCLI
Huawei Cloud Toolkit
CodeArts API
云化转型
云架构中心
云采用框架
用户服务
账号中心
费用中心
成本中心
资源中心
企业管理
工单管理
客户运营能力
国际站常见问题
支持计划
专业服务
合作伙伴支持计划
我的凭证
华为云公共事业服务云平台
工业软件
工业数字模型驱动引擎
硬件开发工具链平台云服务
工业数据转换引擎云服务

标准页面布局

更新时间:2024-07-11 GMT+08:00
分享

标准页面的布局设置一般有以下3种场景:

  • 基础布局设置:适合对CSS与HTML不是非常了解的用户,通过在“基本属性”面板简单配置属性实现基本的布局。
  • 自适应布局:适合使用标准页面在不同大小屏幕(PC、平板、手机等)下呈现出开发者想要的显示效果场景。
  • 高级布局设置:针对有丰富前端开发经验的用户,通过“样式”面板对页面进行更深度的个性化布局定制。

基础布局设置

标准页面提了流式布局(Flow Layout)和弹性布局(Flex Layout),标准页面的基础布局主要是通过“容器”组件实现的。

容器组件就是基础的布局容器,可以将其理解为CSS中DIV的概念。DIV是层叠样式表中的定位技术,全称Division,即为划分,有时可以称其为图层。 DIV是HTML中的一个标签元素,用来为HTML文档内大块的内容提供结构和背景的元素,可以将“容器”简单理解为画布,通过设置外层画布的属性达到控制内容布局的效果。

  • 流式布局

    容器组件默认弹性布局未开启,处于流式布局的状态,如图1所示。

    图1 流式布局

    在流式布局中,组件默认为块级(Block)元素,即不论组件宽度是多少,默认占据全部父级元素的宽度。如图2所示,向画布中拖拽一个“容器”组件,再向“容器”组件中拖入两个“标题”组件,“标题”组件为块级元素,默认占据全部父级元素宽度,即外层“容器”的宽度,第二个“标题”组件会在第一个“标题”组件的下方。

    图2 流式布局中组件为块级元素

    流式布局中,组件由上至下依次排布,可以通过“水平对齐方式”对容器内组件进行水平位置调整,如图3图4所示。

    图3 居中水平对齐
    图4 靠右水平对齐
  • 弹性布局

    将“容器”组件属性面板中的“弹性布局”开启后,布局由流式布局切换到弹性布局,弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方式”和“垂直对齐方式”,如图5所示。

    图5 弹性布局

    为了方便说明弹性布局,向画布中拖拽一个“容器”组件,再向“容器”组件中拖入五个“容器”组件,将每个“容器”组件的宽度和高度设置为100px,并为每个“容器”组件设置不同的背景颜色,在每个“容器”中加入一个“标题”组件,分别显示A、B、C、D、E。

    默认弹性布局下,排列方向为“行”,水平对齐方式为“起点对齐”,垂直对齐方式为“起点对齐”,如图6所示。

    图6 弹性布局默认效果

    排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时,容器内组件从左到右排布。排列方向为“列”时,容器内组件从上到下排布,如图7

    图7 排列方向“列”

    水平排列方式属性,决定了容器主轴方向排列方式。当容器排列方向为“行”时,水平排列方式属性作用于水平方向。当容器排列方向为“列”时,水平排列方式属性作用于垂直方向。排列方向为行时起点为左,水平对齐方式选择“中间对齐”和“终点对齐”时,如图8图9所示。

    图8 水平对齐方式选择“中间对齐”
    图9 水平对齐方式选择“终点对齐”

    垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时,垂直排列方式属性作用于垂直方向。容器排列方向为“列”时,垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上,垂直对齐方式选择“中间对齐”和“终点对齐”时,如图10图11所示。

    图10 垂直对齐方式选择“中间对齐”
    图11 垂直对齐方式选择“终点对齐”

    通过对弹性布局属性的不同组合配置,实现用户想要实现的布局效果。例如,将排列方向设置为“行”,水平对齐方式和垂直对齐方式设置成“中间对齐”,实现居中布局的效果,如图12所示。

    图12 弹性布局实现居中

自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局,确保一个页面在所有终端上(各种尺寸的PC、平板、手机、智能手表等)都能显示出令人满意的效果。利用流式布局加弹性布局,分别为不同的屏幕分辨率定义布局。

标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或多个“栏”组件,“栏”组件可以简单理解为上一小节介绍的“容器”组件,用来提供某一部分的布局,多个“栏”组件组成“分栏”组件。通过配置不同分辨率屏幕中,“栏”组件的呈现形式,实现不同大小屏幕下不同的显示方案,如图13

图13 分栏组件

“分栏”组件右侧属性配置面板的“行布局”中,可以选择“分栏”组件在PC端和移动端下“栏”的布局形式。“PC”属性中可以依据图示选择“分栏”组件,在PC端包含多少个“栏”。

为了方便说明,如何使用“分栏”组件实现自适应布局,向画布中拖拽一个“分栏”组件,在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景,如图14

图14 分栏组件模拟录入员工信息

“phone”属性中,可以依据图示,选择“分栏”组件中“栏”,在移动端的布局形式,如图12所示。当在“PC”选择左到右三个“栏”的布局形式时,移动端的屏幕较小,仍然选择从左到右布局可能导致页面元素显示不全或变形,这时可以在“phone”中选择在移动端下“栏”转换为从上到下排列,此时单击页面上方的“全屏”,手机图标就可以模拟在移动端展示的效果,如图15

图15 移动端展示效果“竖排”

如果在“phone”中,依旧选择从左到右的布局方式,则展示效果如图16

图16 移动端展示效果“横排”

布局模式:可以调整“分栏”组件为流式布局或弹性布局,用来控制“分栏”组件中多个“栏”组件或其他组件的布局,更多流式布局和弹性布局的介绍请参见标准页面布局

录入分隔比例:在“PC”属性的选项中,单击最后的齿轮按钮,可以设置“录入分隔比例”。这个比例指的是将整个屏幕宽度划分为24份,每个“栏”组件所占宽度比例,通过设置“录入分隔比例”,在不同大小的屏幕下“分栏”组件获得屏幕的宽度,决定每个“栏”的宽度,即使在不同大小的屏幕下显示的比例是不变的,从而实现自适应布局。设置“分栏”选择从左到右三个“栏”均分,显示“录入分隔比例”为“8:8:8”,如图17所示。

图17 “录入分隔比例”为“8:8:8”

调整“录入分隔比例”为“6:12:6”时,中间的“栏”的宽度就会按比例放大,两侧“栏”的宽度按比例缩小,如图18

图18 “录入分隔比例”为“6:12:6”

高级设置

对于有丰富页面开发经验的用户,在“样式 > 布局”面板中可以实现对页面CSS属性直接配置。甚至在“高级设置”中,直接编写CSS代码进行更深度的个性化布局定制,如图19

  • 展开“样式”下的“布局”面板,单击“显示”属性后的按钮,可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。
  • “显示”属性下方展示了当前元素的盒模型示意图,在对应的数字位置单击并改变值,即可快速改变元素上下左右位置上的内外边距属性。
  • 当前元素盒模型示意图下方,展示了当前元素的宽和高,默认是根据当前布局自适应后的宽高,可以在这里手动输入值配置当前元素的宽和高。
  • 盒模型和宽高配置时,支持“px”、“em”、“%”、“auto”等多种单位。
    图19 样式属性配置面板

在“样式 > 高级设置”面板中,可以直接编写CSS代码作用于当前元素。如图20所示,可以直接在“容器”组件的“高级设置”中,编写样式代码实现与图12相同的布局效果。

图20 自定义CSS代码实现图12组件居中效果
说明:

同一个组件如果在“基本属性”和“样式”中,同时对布局属性进行了设置,最终生效是“样式”栏中的设置。例如,一个“容器”组件在“基本属性”中勾选了弹性布局,又在“样式 > 布局”中选择了Block,最终这个“容器”组件中的布局为Block。

提示

您即将访问非华为云网站,请注意账号财产安全

文档反馈

文档反馈

意见反馈

0/500

标记内容

同时提交标记内容