结合CSS3的布局新特征谈谈常见布局方法_html/css_WEB-ITnose

写在前面

最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。

常见的页面布局

在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一种最合理的，结构清晰的布局。下面我先根据一些典型的网站案例列举一下几种常见的页面布局。

T型布局

这个是我们比较常见的布局，其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。Segmentfault的主页就是T型布局的。由于网页太长了。没有截取底部。

国字型布局

国字型布局下最上面是网站的标题以及横幅广告条，接下来是网站的主要内寄，左右分列一些小条内容，中问是主要部分，与左右一起罗列到底，最下方是网站的一些基本信息、联系方式、版权声明等。

案例图片来自腾讯11年的一道前段笔试题，有兴趣的同学可以去看一下。 2011腾讯前端面试稿

POP布局

POP布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见：漂亮吸引人。缺点就是速度慢。

人大的主页就类似这种布局。

左右布局型

顾名思义，就是网页主体分为左右两大块，多见为后台管理系统页面。一般左右布局型的页面需要做到两列等高。

如：

上下布局型

参见苹果的官网，类似于整屏显示的网页都为上下布局。

如何实现——常见的布局方法

关于布局的类型就先说这么多，下面来总结一下上述的布局怎么来实现。下面提一下大家应该都很熟悉的两大布局方法。 圣杯布局和双飞燕布局。其实这两种方法一般多用国字型布局上。就是针对 三行三列布局的。进行相应的改造也可以用在T字型布局上。用这两种方法可以很好地解决 主体部分优先加载的问题。

圣杯布局

基础布局：

重点来看main部分的代码

 这里是主体 这是左侧边栏 这是右侧边栏

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com