常见的网页布局方式盘点

 在设计网页界面时，需要从整体上把握好各种元素的布局。只有充分地利用页面空间、结构性的分割页面空间，并使其布局合理，才能设计出好的网页界面。在设计网页界面时，需要根据不同的网站定位和页面内容选择合适的布局形式，下面将介绍一些常见的网页布局方式。

A.“国”字形

这种结构是网页上使用最多的一种结构类型。是综合性网站页面中常见的布局方式 ，即最上面是网站的导航及视觉广告图，接下来就是网站的主要内容，左右分列小条内容，通常情况下左边是主菜单，右边放友情链接，活动公告等次要内容， 中间是主要内容，与左右一起排列到底，最底端是网站的一些基本信息、联系方式、版权声明等。这种版面的优点是页面充实、内容丰富、信息量大；缺点是页面拥挤、不够灵活，如图所示。

B. 拐角形

拐角形，又称 T 字形布局，这种结构和上一种只是形式上的区别，其实是很相近的，就是网页上边和左右两边相结合的布局，通常右边为主要内容，所占比例较大。在实际运用中还可以改变 T 布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图像或导航栏。这种版面的优点是页面结构清晰、主次分明、易于使用； 缺点是规矩呆板，如果细节、色彩不到位，很容易使浏览者感觉乏味。

C. 标题正文型

标题正文型即上面是网页标题或者类似一些内容，下面是网页正文内容，例如一些文章页面或者注册页面等就是这种类型的页面，如图所示。

D. 左右分割型

这是一种左右分割的网页布局结构，一般左侧为导航链接，有时最上面会有一个小的标题或标志，右侧为网页正文内容。这种类型的网页布局，结构清晰、一目了然，如图所示。

E. 上下分割型

于左右分割的布局结构类似，区别仅仅在于这是一种上下分割的网页布局结构，这种布局结构的网页，通常上面放置的是网页的标识和导航菜单，下面放置网页的主要内容，如图所示。

F. 综合型

该布局方式是将左右框架型和上下框架型相结合的网页结构布局方式，它是相对复杂的一种布局方式，如图所示。

G. 封面型

这种类型基本上出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的超链接或者只是一个“进入”的超链接，甚至直接在首页的图片上做超链接而没有任何注释。这种类型大部分出现在企业网站和个人网站的首页中，可以给浏览者带来赏心悦目的感受，如图所示。

H.H5 动画型

其实H5 动画型网页布局与封面型布局结构是类似的，只是这种类型采用了流行的 H5 动画，与封面型不同的是， 由于 H5 动画强大的交互表现能力，使页面所表达的信息更丰富，其视觉效果更加出众，如图所示。