新闻资讯

    数科干货

    前端浅谈-常见布局介绍

    前端

    前端,通俗点来讲,主要是指用户在浏览器上浏览的网页。而前端开发,就是设计并实现这个网页界面的过程。在这一过程中,页面上的每个区域都可以看作是元素。

    网页布局有哪几种_可以用.种方式进行网页的布局_网页布局设计

    我们平时上网冲浪,经常会接触到不同的网页,但其实一个网页页面的展示可以是多种多样,每一个页面都有其独特的布局风格。页面布局对于前端开发是必不可少的一个环节,而布局方式也有很多,比如静态布局、弹性布局、浮动布局、定位布局等。接下来由我向大家介绍几种常见的布局。

    静态布局

    网页布局有哪几种_可以用.种方式进行网页的布局_网页布局设计

    静态布局,是传统的网页设计布局网页布局有哪几种,就好比拼图,从下往上,从左往右,依次放置。这种布局中的元素往往是固定的,看起来比较直观,但同时也缺乏灵活性。分辨率不同的电脑得到的显示效果也各不相同。在现在的绝大多数系统中,开发者一般会采用更为灵活的布局方式。

    弹性布局

    网页布局设计_可以用.种方式进行网页的布局_网页布局有哪几种

    弹性布局,是指将页面的一部分区域当作一个容器,容器内的元素自动有序排列。这种布局方式最大地特点就是可以自动扩展和收缩容器成员,最大限度地填充可用空间。以我们集团OA系统的个人门户模块为例,其中个人数据版块(如下图所示)就可以看作是一个容器,容器内横向排列了三个元素(待办事宜和我的会议、协作、我的文档和我的日程),三个元素之间所占空间比例是1:1:1的,弹性布局可以设置每个元素的比例值,从而改变元素的空间大小。当容器内存在多余的空间时,还可以把多余的空间划分给各个元素网页布局有哪几种,实现对空间的最大利用。

    网页布局有哪几种_网页布局设计_可以用.种方式进行网页的布局

    浮动布局

    浮动布局,它的特点是可以使两个原本各自独占一行的元素并排显示。以集团门户为例,其中有很多地方都用到了浮动布局:比如蓝色顶部栏内的闹铃图标,它没有像其它元素从左到右依次排列,而是位于最右侧,这是因为它具有右浮动属性;再比如流程中心和我的邮件这两个模块,也都设置了浮动属性,因为正常情况下这两个模块是上下排列,通过添加左浮动属性,从而实现从左侧开始依次排列。除此之外,还可以通过内外间距的控制,使元素之间分布有序,不会挤在一起。

    网页布局有哪几种_可以用.种方式进行网页的布局_网页布局设计

    以上介绍了前端三种常见布局方式,除此之外还有其他一些各具风格和特色的布局方式,可用于特定的应用场景。正是这些不同特点的布局汇聚在一起,组成了现在PC、手机、手持设备等多姿多彩的页面。

    END

网站首页   |    关于我们   |    公司新闻   |    产品方案   |    用户案例   |    售后服务   |    合作伙伴   |    人才招聘   |   

地址:北京市海淀区    电话:010-     邮箱:@126.com

备案号:冀ICP备2024067069号-3 北京科技有限公司版权所有