体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 结合CSS3的布局新特征谈谈常见布局方法
搜索:
您的位置: 主页 > 教程 > 网页设计 > CSS > » 正文

结合CSS3的布局新特征谈谈常见布局方法

来源: 易采站长站

一、常见的页面布局

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

1、T型布局

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

2、国字型布局

国字型布局下最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与左右一起罗列到底,最下方是网站的一些基本信息、联系方式、版权声明等。
案例图片来自腾讯11年的一道前段笔试题,有兴趣的同学可以去看一下。2011腾讯前端面试稿

3、POP布局

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

4、左右布局型

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

如:

5、上下布局型

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

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

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

1、圣杯布局

基础布局:

XML/HTML Code复制内容到剪贴板
  1. <div id="header"></div>   <div id="main"></div>  
  2. <div id="footer"></div>  
Tags:
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
体彩排列3六码分布走势图 华东15选5单期走势图 体彩排列5双期走势图华东15选5除八走势图 体彩超级大乐透后区除五走势图 河南福彩22选5走势图 江苏体彩七位数历史开奖号码 华东15选5除六走势图 福彩3D走势图 福彩双色球红球尾数走势图 江苏体彩七位数质合走势图 福彩双色球奇偶走势图 福彩3D走势图 体彩七星彩大小分析 福彩双色球201遗漏走势图 数字彩复式拆分 江苏体彩七位数大小分析 体彩排列5双期走势图河南福彩22选5大小走势图 华东15选5中奖规则 体彩排列3奇偶走势图 华东15选5除五走势图