您现在的位置是：网站首页> 编程资料编程资料
关于自适应布局的处理(利用浮动和margin负边距实现)_心得技巧_网页制作_
2021-09-11
833人已围观
简介 自适应布局主要是浮动圣杯布局也叫双飞翼布局，主要是利用浮动和margin负边距实现的，希望大家能够很好的理解下面的几个例子，绝对定位布局也是非常的简单了
自适应布局在实际应用中越来越普遍了，今天分享几个自适应布局的demo，主要是浮动圣杯布局（也叫双飞翼布局，主要是利用浮动和margin负边距实现的），没有介绍绝对定位布局，都是我想，你能明白我下面的几个例子，绝对定位布局也是非常的简单了。
PS：圣杯布局有个好处，符合前端开发中渐进增强的理念，因为浏览器解析是从DOM的上至下，圣杯布局能够把页面中重要的内容section放到DOM前面先解析，而次要的aside内容则放在DOM后面后解析。
下面的例子能够解决实际应用中绝大多数的自适应布局问题了，有兴趣的童鞋可以研究下，代码如下：
1.左边固定，右边自适应(圣杯布局的实现)：
无标题文档
2.右边固定，左边自适应(圣杯布局的实现)：
无标题文档
3.左边和右边固定，中间自适应：
无标题文档
PS：圣杯布局有个好处，符合前端开发中渐进增强的理念，因为浏览器解析是从DOM的上至下，圣杯布局能够把页面中重要的内容section放到DOM前面先解析，而次要的aside内容则放在DOM后面后解析。
下面的例子能够解决实际应用中绝大多数的自适应布局问题了，有兴趣的童鞋可以研究下，代码如下：
1.左边固定，右边自适应(圣杯布局的实现)：
复制代码
代码如下:content
aside
2.右边固定，左边自适应(圣杯布局的实现)：
复制代码
代码如下:content
aside
3.左边和右边固定，中间自适应：
复制代码
代码如下:content
aside
aside
相关内容
- 提高网页加载速度的初步简单技巧方式_心得技巧_网页制作_
- 如何提交表单中disabled表单域的值示例代码_心得技巧_网页制作_
- form表单中的Input使用disabled不能提交的解决方法_心得技巧_网页制作_
- 条件注释判断浏览器(ie系列)_心得技巧_网页制作_
- 网页常用分享代码大全(前端必备)_心得技巧_网页制作_
- ie6下关于html编码问题导致js出错css不被应用的解决方法_心得技巧_网页制作_
- 实测图片的HTTP请求_心得技巧_网页制作_
- favico.ico---网站ico图标设置步骤_心得技巧_网页制作_
- 网页在各种分辨率和浏览器中均可正常显示的方法_心得技巧_网页制作_
- em是何物 em与px的介绍及换算方法_心得技巧_网页制作_
