网页设计结构布局pop 第1篇
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
网页设计结构布局pop 第2篇
所谓_T_结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变_T_结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等。
这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人_看之无味_。
网页设计结构布局pop 第3篇
下边把利用flex布局实现上述几种布局的代码贴出来（可有多种实现方法）。
T布局
国字型布局
grid布局是W3C提出的一个二维布局系统，通过 display: grid 来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对grid布局进行一个简单的了解。目前,grid仅仅只有Edge使用前缀能够支持，为了更好地体验，可以使用 Chrome 浏览器，在chrome://flags开启#enable-experimental-web-platform-features`选项。另外，更多的例子可以前往 Grid by examples, 更多的用法可以前往 W3 Specification,也可以前往 A Complete Guide to Grid
网页设计结构布局pop 第4篇
关于布局的类型就先说这么多，下面来总结一下上述的布局怎么来实现。下面提一下大家应该都很熟悉的两大布局方法。圣杯布局和双飞燕布局。其实这两种方法一般多用三行三列布局。进行相应的改造也可以用在T字型布局上。用这两种方法可以很好地解决主体部分优先加载的问题。
相关解释如下：
(1)中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去(2)把左层margin负100后，发现left上去了，因为负到出窗口没位置了，只能往上挪(3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位(4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果
圣杯布局实际看起来是复杂的后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局，代码如上。增加多一个父级div就可以不用相对布局了，只用到了浮动和负边距。
这里详细总结了等高布局的 八大方法，我再谈谈实际项目中比较常用的，或者说比较简单的三种方法。
其实发现这不过是BFC中的几个情况而已。更多关于BFC的请移步：