页面设计——Layout布局
一、布局概念
Layout：布局容器，其下可嵌套 Header Sider Content Footer或Layout本身，可以放在任何父容器中。
Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。
Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
二、基本结构
三、如何使用
基于Layout布局组件：
高度、宽度：可以设定百分比或者固定PX。
顶部、底部：可以设置显隐、宽高、高级设置控制边距、边框、背景、字体等。
左侧、右侧：可以设置显隐、宽高、折叠，高级设置控制边距、边框、背景、字体等。
四、应用场景
1.拥有侧边导航，区别是两边未留边距，多用于应用型的网站
侧边两列式布局。侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。
2.拥有顶部导航及侧边栏的页面，多用于展示类网站
3.最基本的『上-中-下』布局
一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率。
4.固定头部
一般用于固定顶部导航，方便页面切换。
页面设计——Layout布局相关推荐
- 网站的页面该如何去设计与布局
网站的页面是用户访问后,第一样所看到的地方,一个网站页面设计与布局设计周全考虑全面,会很大程度提升网站用户的使用体验,如何制作网站网站页面要是设计不合理的话,会严重的影响到用户的体验度. 网站的页面该 ...
- 页面学习——鸿蒙登录页面设计
页面学习--鸿蒙登录页面设计 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <Direction ...
- 复习：前台页面设计——网页设计的布局、HTML常用的布局结构
1.网页设计的布局 "国"字型布局: 国型布局也称为同型布局,布局结构与"国"字相似而得名 是一些大型网站所喜欢的类型 页面最上部分一般放置网站的标志和导航栏或 ...
- 因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
- 跨终端响应式页面设计入门
跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图: 这里 ...
- （仿头条APP项目）7.首页标签页完善和微头条页面设计实现
文章目录 一.首页标签页完善 效果图 具体实现 二.微头条页面设计实现 效果图 实现思路 具体实现 布局 微头条页面实体类 业务逻辑代码 一.首页标签页完善 在之前已经把首页北京标签的新闻列表页面基本 ...
- （仿头条APP项目）5.列表页面设计实现
文章目录 列表页面设计 效果图 具体实现 添加Glide依赖 添加主页面和两个列表布局 用GsonFormat快速创建NewListData实体类存放新闻列表数据 MyApi添加一个获取新闻列表的方法 ...
- 404 找不到页面_找不到404页面设计，如何创建较大的错误页面
404 找不到页面 What's an error page for you? A reason for feeling confused and annoyed? A bit of a bother ...
- Ext JS4序列教程之一 ：Layout布局
1.序言 EXT JS4序列教程主要讲解WEB开发中一些常用的组件,例如Tree,Grid,Combobox,form等,EXT JS4的出现为广大程序员带来了福音,我们可以用较少的代码,实现很炫丽的 ...
最新文章
- Linux 设备驱动中的并发控制 小感
- [HNOI 2011]XOR和路径
- 开源免费的.NET图像即时处理的组件ImageProcessor
- java图形界面颜色随机变换,JavaScript实现鼠标移入随机变换颜色
- Java虚拟机运行时栈帧结构--《深入理解Java虚拟机》学习笔记及个人理解(二)
- 构建插件式的应用程序框架(一)－－－－开篇
- r语言集合补集_R语言之数据处理(二)
- Windows 下的 electron 开发笔记一
- 用Java实现一个学生管理系统（附源码）
- 计算机什么病毒有远程控制功能,怎样知道自己的电脑已被远程控制
- SWOT个人分析模板
- 四阶行列式计算_通过考试01 / 行列式的计算
- 《众妙之门——用户体验设计的秘密》一第2章 设计“好脾气”的网页2.1 巴赫和他的十二平均律...
- linux 桌面背景图,linux常用命令桌做成的桌面图片，可当背景图片
- 基于alphalens对qlib的alpha158做单因子分析
- iOS webview 实现不允许上拉回弹但是可以下拉刷新
- dspq值多少最好_抖音手机上怎么修改视频的md5值
- 原生js实现动态表格分页(封装版)
- 今年的奥运会延期至2021年夏季举行，盘点一下历届奥运会数据
- 如何使用python编程、字典中的get是什么_详细解析python字典get()实例教程