课程介绍

学习资料

来源：天津网页设计培训学校时间：2021/9/3 15:59:01

天津网页布局方式有哪些

网页布局方式有哪些？天津天琥设计学校是天津地区好的网页美工设计培训学校。天津天琥设计学校是连锁教育品牌天琥设计的天津校区，致力于打造天津市好的网页美工设计培训学校！
网页布局常用的方式有这些：1.固定布局。为网页设置一个固定的宽度，通常以px做为长度单位;2.流式布局，为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整。
网页布局方法有哪些
1、固定布局。为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。
2、流式布局(LiquidLayout)。为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位(通常搭配min-*、max-*属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示)，高度大都是用px来固定住。流式布局的代表作是栅格系统(网格系统)。
例如设置网页主体的宽度为80%，min-width为960px。图片也作类似处理(width:,max-width一般设定为图片本身的尺寸，防止被拉伸而失真)。
缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调
3、栅格化布局。将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
比如像bootstrap，foundation这些框架采用的就是栅格系统，只要给页面元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。

做网页设计师提升核心竞争力

课程设置层层递进，技能学习步步为营