我的日记本开发手记（3）—— 布局

配色已搞定，现在进行页面布局。那什么是布局呢？布局就是将文字、图形、图片等版面构成元素合理、有秩序地安放在限定的空间内，使页面兼具易读性和美观性，让读者产生一种舒适愉悦感，从而产生继续读下去的念头，而不是往你身上砸瓶子或者中途退场。我把目前比较流行的页面布局进行了梳理，都是一些最基本的布局。其实布局是一个仁者见仁，智者见智的一项事情，我只是大概提供给了一些自己的思路，在实际工作中，往往不是单一的布局方式，需要灵活应用，叠加多种布局方式，才能看起来爽心悦目。

1. T形布局

这种布局是目前比较常见的一种布局，页面整体看起来向个字母“T”，所以叫T形布局。一般页面的顶部放置横网站的标志、Banner广告或菜单，占满整个屏幕，随着屏幕分辨率大小而始终铺面横屏，下方则是具体主要内容。如下图所示，就是一个T型布局，看起来页面结构清晰，主次分明。

2. 左右型布局

左右型布局的意思就是将页面分成多列，进行布局。常见的有3列布局和2列布局，也可以多列布局。
三列布局，顾名思义就是将页面分为三列显示，左右分列一些小条内容，中问是主要部分，与左右一起罗列到底。三列布局也是很灵活的布局，三列可以把页面进行均分，也可以根据实际需要按照一定的比例进行分割。这让我想到了栅格化布局，所谓栅格化布局就是把页面平均分割成一个个网格，可以任意组合不同的网格，做出各种各样的布局，一般分为12条或24条，然后在进行组合。已分割12条为例，分为三列，可以分为4:4:4、3:6:3、2:8:2…等不同组合，以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了，将在以后详细介绍实现方法。如下图所示，就是一个三列布局，优点页面容纳内容很多，信息量大。

两列布局型顾名思义，就是网页主体分为左右两大块，多见为后台管理系统页面。一般左右布局型的页面需要做到两列等高。其实这种布局跟三列布局相同，只是把页面分成了两列，如下图是一个左右型布局，看起来简单明了。

3. POP布局

POP引自广告术语，POP布局就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，这种布局常用于时尚类站点。如下图所示，就是一个POP布局，漂亮吸引人，还是值得借鉴的。

4. 上下布局型

上下行布局与左右型布局相对应，就是将页面主要按行显示，在视觉上呈现「竖向」的排版感觉。下图是上下型布局，看起来重点突出。

介绍完了4中布局方式，镜头拉回我们的日记本开发程序，我们的页面布局准备使用第二种布局方式，左右型布局，分为三列。
下一节，我讲正式开始实施我的计划了，自己还是有些期待的。

---

我的日记开发系列手记目录

1.我的日记本开发手记——概述
2.我的日记本开发手记（2）——配色
3.我的日记本开发手记（3）—— 布局
4.我的日记本开发手记（4）—— UI效果图
5.我的日记本开发手机（5）——效果图转HTML