网页布局方法

2017-04-23 18:09:48
admin
1144
最后编辑:admin 于 2018-01-03 11:20:27
精美的界面(UI)离不开网页布局(layout)。在网页布局的技术史上有3种比较流行的方法:

表格布局、盒式模型和Flex布局

2000年之前,表格布局非常流行。该方法将网页上的各个模块设计成表格的单元格,各个模块的位置由单元格在表格中的位置决定,其大小由单元格的大小决定。每个模块或显示文字, 或显示图片,共同组成方方正正的网页。这种方法的缺点是不易维护,在网页上新增一个模块就可能改变整个网页的布局,所以渐渐被淘汰了。

2000年之后,互联网发展迅速,网页需要呈现的信息越来越复杂,于是就出现了盒式模型。该方法采用div分离各个模块,由定位方式(position)、浮动方式(float)、外边距(margin)、内边距(padding)等确定位置,由宽度(width)、高度(height)确定大小。这种方法易于维护,至今仍大量应用。

2010年之后,移动互联网高速发展,各种上网设备(手机、平板电脑、上网本、笔记本)层出不穷,这就要求网页布局能适应各种尺寸、类型的屏幕,于是出现了响应式布局。Flex布局就是流式响应式布局的方法。这种方法能够轻松完成页面元素的排列、对齐、换行,能够适配不同屏幕 大小、不同显示设备,适用于移动端网页设计。



    • 在线客服
    • 关注微信
    • 联系电话
      • 欢迎咨询
      • 欢迎加入QQ群 303257430
    • 公众号:源宝网络
      • 联系电话及微信号 18902328227