欢迎来到 jackNEss'窝窝
I like simple mind

栅格化布局技术分析——浮动式布局

2011年09月03日

浮动式布局

在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

  • 浮动 float
  • 负边距 negative margin
  • 相对定位 relative position

这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

在选用布局的时候应该考虑的因数有:

  • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
  • 确保任何一栏为最高栏时不会出问题。
  • 良好的兼容性。
  • 易于修改。
  • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

下面我就以三栏布局为例对我了解到的几种布局进行分析:

浮动式布局(Float Layout)

最最最常见的布局,灰常地常见的布局方式,现在的网站所采用的 很大部分就是这种。

技术层面:

  • 浮动 float


下面是代码部分:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>float layout</title>
<style type="text/css">
<!--
*{margin:0;padding:0; font-family:arial,sans-serif;}
.content_box{
	height:50px;
	padding:10px;
	background:#e1e1e1;
	border:1px dotted #ccc;
}

/*-- 关键部分代码 --*/
.bodyArea{ width:950px; margin:50px auto;}
.left_side{ float:left; width:230px;}
.main_side{ float:left; width:510px; margin-left:10px;}
.right_side{float:right;width:190px;}
.clear{ display:block; height:0; clear:both; overflow:hidden;}


-->
</style>

</head>
<body>

<div class="bodyArea">
	<div class="left_side">
		<div class="content_box">side:230px;</div>
	</div>
	<div class="main_side">
		<div class="content_box">main:510px;</div>
	</div>
	<div class="right_side">
		<div class="content_box">extra:190px;</div>
	</div>
	<div class="clear"></div>
</div>
</body>
</html>

演示地址:http://www.jackness.org/lab/2011/grid_layout/example_float_layout.html

这种的布局可以说是基础布局。

优点:

  1. 易于实现。
  2. 确保任何一栏为最高栏时不会出问题。
  3. 良好的兼容性。
  4. 实现了内容与布局的分离。

缺点:

  1. 灵活性差

    例如根据业务需求和内容的更改,现在要将框架扩展到1000px宽度,你需要修改的地方有

    • 框架 .bodyArea 由 950px => 1000
    • 主栏目部分 .right 计算 1000 – 950 + 510 得出 560,并进行修改。

    个人感觉十分不灵活,改的参数太多,改着闹心。

  2. 不能在定宽布局和流体布局之间切换(这个是重点)。

结语:

适合初学者,但是个人认为不推荐使用,还是那句话,不灵活。

分类HTML + CSS
阅读 1,257
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS