流式布局应用举例

来源：互联网发布：上传图片可预览js插件编辑：程序博客网时间：2024/06/14 14:38

html布局中的流式布局实质是页面标签利用百分比进行布局，元素大小会随着页面大小变化而变化，但是当页面变得过大或过小是，页面元素就不能正常显示。下面利用流式布局的特点实例演示。

一确定页面标签的百分比就需要知道标签元素之前的实际数值，现有自适应布局的页面如下

其源代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>practice</title><style type="text/css">#wrap {width: 800px;height: 600px;margin: 30px auto;background: aqua;border: 2px solid firebrick;}.top {height: 100px;height: 16.67%;background: bisque;}.middle {width: 800px;height: 400px;}.clear:after {content: "";display: block;clear: both;}.float {float:left;}.left {width: 25%;height: 100%;background: skyblue;}.center {width:50%;height: 100%;background: teal;}.right {width: 200px;height: 400px;background: indigo;}.bottom {width: 800px;height: 100px;background:palegreen;}</style></head><body><div id="wrap"><div class="top">导航</div><div class="middle .clear"><div class="left float">左侧栏</div><div class="center float">中间</div><div class="right float">右侧栏</div></div><div class="bottom">底部</div></div></body></html>

我们要做的就是将上面的标签数值转化成可根据浏览器页面大小变化而变化的百分比参数

二确定当前浏览器分辨率（px）值

当无法得知确切分辨率时可利用js函数来计算：

<script type="text/javascript">var width = document.body.clientWidth;var height = document.body.clientHeight;alert(width);alert(height);</script>

经过计算得知分辨率为1901*940px。

三计算各元素标签数值占父级百分比

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>practice</title><style type="text/css">height:940px;*/html,body {width: 100%;height: 100%;}#wrap {/*width: 800px;*/width: 42.08%;/*height: 600px;*/height: 63.83%;margin: 30px auto;background: aqua;border: 2px solid firebrick;}.top {width: 100%;/*height: 100px;*/height: 16.67%;background: bisque;}.middle {/*width: 800px;*/width: 100%;/*height: 400px;*/height: 66.67%;}.clear:after {content: "";display: block;clear: both;}.float {float:left;}.left {width: 25%;height: 100%;background: skyblue;}.center {width:50%;height: 100%;background: teal;}.right {/*width: 200px;*/width: 25%;/*height: 400px;*/height: 100%;background: indigo;}.bottom {/*width: 800px;*/width: 100%;/*height: 100px;*/height: 16.67%;background:palegreen;}</style></head><body><div id="wrap"><div class="top">导航</div><div class="middle .clear"><div class="left float">左侧栏</div><div class="center float">中间</div><div class="right float">右侧栏</div></div><div class="bottom">底部</div></div></body></html>

利用百分比实现转换之后，页面的布局转换成了流式布局，此时无论缩小或放大页面，页面内标签都会随着大小而成比例缩小或放大。

1 0