网页布局方法都有哪些_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 1:39:58 共计：3579 浏览

网页布局方法都有哪些？

一、静态布局

在传统的网页设计中，网页上所有元素的大小都是px。

1. 布局特征

无论浏览器的确切大小如何，页面的布局始终与第一次编写代码时相同。常规的PC站点是静态布局的，具有最小宽度，因此，如果宽度小于此值，则显示滚动条，如果宽度大于此值，则显示内容居中和背景。这种设计在PC上很常见。

2. 设计方法

PC:中心布局，所有样式使用绝对宽度/高度(px)，设计一个布局，在屏幕的宽度和高度已经调整，使用水平和垂直滚动条检查覆盖部分;移动设备:建立一个单独的移动网站，设计一个单独的布局，并使用一个不同的域名，如wap。或者m。

优点:这种布局对设计师和CSS作者来说都是最简单的，并且没有兼容性问题。

缺点:很明显你不能改变用户的屏幕尺寸。目前，大多数门户网站、大多数企业PC广告网站都采用了这种布局。固定像素大小的web页面是匹配固定像素大小的显示的最简单方法。然而，这种方法不是一种完全兼容的方式来创建未来的web页面。我们需要一些方法来适应未知的设备。

二、流式布局

液体版面(也称为“流体”)的特点是页面元素的宽度根据屏幕分辨率进行调整，但总体版面不变。代表性围栏系统(网格系统)。例如，将主网页正文的宽度设置为80最小宽度设置为960px。图像也被类似地处理(宽度：100%，最大宽度通常设置为图像本身的大小，以防止由于拉伸而失真)。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。