没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
13页
一、常见的页面布局 在拿到设计稿时,作为一个前端人员,我们首先会做的应该是为设计图大致地划分区域,然后选择一种最合理的,结构清晰的布局。下面我先根据一些典型的网站案例列举一下几种常见的页面布局。 1、T型布局 这个是我们比较常见的布局,其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于放置网页正文等主要内容。 Segmentfault的主页就是T型布局的。由于网页太长了,没有截取底部。 2、国字型布局 国字型布局下最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与左右一起罗列到底,最下方是网站的一些基本信息
资源推荐
资源详情
资源评论
结合结合CSS3的布局新特征谈谈常见布局方法的布局新特征谈谈常见布局方法
一、常见的页面布局一、常见的页面布局
在拿到设计稿时,作为一个前端人员,我们首先会做的应该是为设计图大致地划分区域,然后选择一种最合理的,结构清晰的
布局。下面我先根据一些典型的网站案例列举一下几种常见的页面布局。
1、、T型布局型布局
这个是我们比较常见的布局,其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于
放置网页正文等主要内容。
Segmentfault的主页就是T型布局的。由于网页太长了,没有截取底部。
2、国字型布局、国字型布局
国字型布局下最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与
左右一起罗列到底,最下方是网站的一些基本信息、联系方式、版权声明等。
案例图片来自腾讯11年的一道前段笔试题,有兴趣的同学可以去看一下。2011腾讯前端面试稿
3、、POP布局布局
POP布局指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见:漂亮吸引
人。缺点就是速度慢。
人大的主页就类似这种布局。
4、左右布局型、左右布局型
顾名思义,就是网页主体分为左右两大块,多见为后台管理系统页面。一般左右布局型的页面需要做到两列等高。
如:
5、上下布局型、上下布局型
参见苹果的官网,类似于整屏显示的网页都为上下布局。
二、如何实现二、如何实现——常见的布局方法常见的布局方法
关于布局的类型就先说这么多,下面来总结一下上述的布局怎么来实现。下面提一下大家应该都很熟悉的两大布局方法。圣杯
布局和双飞燕布局。其实这两种方法一般多用国字型布局上。就是针对三行三列布局的。进行相应的改造也可以用在T字型布
局上。用这两种方法可以很好地解决主体部分优先加载的问题。
1、圣杯布局、圣杯布局
基础布局:
XML/HTML Code复制内容到剪贴板
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
重点来看main部分的代码
CSS Code复制内容到剪贴板
<style type="text/css">
#main {
overflow: hidden; /*修整由子元素浮动引起的高度塌陷问题*/
zoom: 1;/*低版本ie下:触发haslayout属性,修整由子元素浮动引起的高度塌陷问题*/
/*将主体部分左右侧预留出左右边栏大小的空白位置*/
padding: 0 300px 0 220px;
}
.m_content, .m_leftside, .m_rightside {
float: left;
/*目的是将左右侧边栏拉回*/
position: relative;
}
.m_content {
width: 100%;
}
.m_leftside {
width: 220px;
剩余12页未读,继续阅读
资源评论
weixin_38559346
- 粉丝: 4
- 资源: 943
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功