237
云计算
负载均衡
产品简介
产品价格
快速入门
用户指南
实践操作
常见问题
购买指南
云服务器
产品简介
计费规则
购买指导
控制台使用指南
常见问题
云数据库
产品简介
计费规则
购买指导
快速入门
连接实例
控制台使用指南
对象存储
产品简介
控制台使用指南
程序员百科
Python
阿里云速成美站设计教程-设计器内对网站的全面规划、布置操作指南

产品推荐:

1、安全稳定的云服务器租用,2核/2G/5M仅37元,点击抢购>>>

2、高防物理服务器20核/16G/50M/500G防御仅350元,点击抢购>>>

3、百度智能建站(五合一网站)仅880元/年,点击抢购>>> 模板建站(PC+手机站)仅480元/年,点击抢购>>>

4、阿里云服务器2核2G3M仅99元/年、2核4G5M仅199元/年,新老同享,点击抢购>>> 

5、腾讯云服务器2核2G4M仅99元/年、新老同享,点击抢购>>>   


点击这里点击这里进入阿里云速成美站官方页面,立体验云·速成美站>>>

为方便您对网站的全面规划、布置,使各模块间更清晰,您可使用布局控件,布局控件内可放置多种其他控件。本文介绍如何添加及设置布局控件。

布局类控件的作用

布局类控件的作用图示如下:

布局类-3

添加布局控件步骤

  1. 单击设计 > 排版布局。选择所需布局控件,可参考下表进行选择。




    容器名称

    显示效果

    注意事项

    容器

    可调整宽、高

    自适应布局

    宽度自适应屏幕最大宽度

    为避免出现显示问题,自适应布局与自适应布局间请勿互相嵌套使用

    标签布局

    多栏,可调整宽高

    多栏布局

    多栏,可设置高度,宽度可选择通栏/页面宽度可设置每一栏的比例

  2. 选择后,在页面内合适位置单击即可添加成功。

说明
  • 使用布局类控件时,应多查看层次,方便您缕清结构。

  • 将容器控件放入标签布局控件中,再在容器中放置按钮、图片等,可设计出精美的导航。如需观看标签布局的视频请单击标签控件的使用。

设置容器控件

  • 选中容器控件,单击设置 > 样式,可设置容器背景、容器边框、容器阴影。image.png

  • 动效:选中控件,单击设置 > 动效,可设置容器动画效果。

  • 排列:选中控件,单击设置 > 排列,可设置容器尺寸及位置。

设置自适应布局控件

  • 选中自适应布局控件,单击设置 > 样式,可切换样式、设置通栏背景。自适应布局设置

  • 选中自适应布局控件,单击设置 > 排列,可设置高度(自适应布局宽度自适应)及位置。自适应尺寸及位置

设置标签布局控件

  • 选中标签布局控件,单击设置 > 样式,可设置默认状态下的标签样式、区域内容样式、阴影;悬停、选中状态下的标签样式。image.png

  • 选中标签布局控件,单击设置 > 数据,可增加标签、删除标签、编辑标签名称、标签链接、标签链接的打开方式。标签

  • 交互:选中控件,单击设置 > 交互,可设置标签切换方式。

  • 排列:选中控件,单击设置 > 排列,可设置标签尺寸及位置。

设置多栏布局控件

  • 选中多栏布局控件,单击设置 > 样式,可设置宽度、比例、列间距、背景。image.png

  • 选中多栏布局控件,单击设置 > 数据,可增加栏目、删除栏目、编辑栏目名称及栏目背景。多栏-数据

  • 排列:选中控件,单击设置 > 排列,可设置多栏布局尺寸及位置。

锁定位置功能

选中控件时,单击像锁一样的图标按钮,可锁定当前位置。

删除控件功能

选中控件时,单击像废纸篓一样的图标按钮,可删除此控件。


这条帮助是否解决了您的问题? 已解决 未解决

提交成功!非常感谢您的反馈,我们会继续努力做到更好! 很抱歉未能解决您的疑问。我们已收到您的反馈意见,同时会及时作出反馈处理!