浅谈常见的网页设计布局方式
2页1、世界工厂网线上生态学院 世界工厂网线上生态学院:制造企业开展线上业务的加油站 浅谈常见的网页设计布局方式 在前端开发中页面布局总是最开始的工作,就像盖楼时,先搭框架,然后再填砖,前端也是一样的,先做好页 面的布局工作。 通过浏览不同的网站发现,页面的布局都是大同小异,总结下来大概就几种: 一、顶部大图 Banner+简单的栅格 无论屏幕多大,这种布局都能够为用户展示充足的内容,供用户浏览和探索。虽然这种布局随着屏幕、设备而 有所差异,有的设计师会倾向于设计成固定宽或者横跨整个页面的布局,但是总体的模式都大同小异。导航栏 顶部大图,图片上叠有文字标题 24 个分栏,承载不同类别的信息,有的会有图标主要的内容区域页脚这种布 局设计干净清爽,有足够强的视觉表现力,并且常常采用的响应式设计,断点也很好控制。顶部大面积的轮播 图或者 Banner 也有许多插件或者应用来帮你实现。 原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特 定的体验,下面的次一级元素能够做的很好的支撑。 相关趋势:越来越多这类网页开始采用色彩丰富的插画式的图标,而扁平化的设计
2、和这种布局页面有着天然的 契合。 二、弹性布局(伸缩布局) CSS3 引入了一种新的布局模式Flexbox 布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有 效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为 Flex。 Flexbox 布局常用于设计比较复杂的页面,可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对 位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox 布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,让你可以调节伸缩项目的相对大小和位置。 例如,你可以确保伸缩容器中的多余空间平均分配多个伸缩项目,当然,如果你的伸缩容器没有足够大的空间 放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器。综合而言,Flexbox 布局功能主要具有以下几点: 第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大 小; 第三,可以指定伸缩项目沿着主轴或侧轴
《浅谈常见的网页设计布局方式》由会员岁***分享,可在线阅读,更多相关《浅谈常见的网页设计布局方式》请在金锄头文库上搜索。
2022-03-09 9页
2020-10-15 412页
2020-08-24 7页
2019-10-29 2页
2019-04-29 2页
2019-04-29 2页
2019-04-29 2页
2019-04-29 2页
2019-04-29 2页
2019-04-29 2页