栅格化布局

欢迎来到 jackNEss'窝窝
I like simple mind
  • 双飞翼布局

    在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

    基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position

    这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

    在选用布局的时候应该考虑的因数有:

    • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
    • 确保任何一栏为最高栏时不会出问题。
    • 良好的兼容性。
    • 易于修改。
    • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

    下面我就以三栏布局为例对我了解到的几种布局进行分析:

    双飞翼布局(Flying Swing Layout)

    玉伯 提出的一种布局。也是本文中所推荐的布局方式。

    技术层面:

    • 浮动 float
    • 负边距 negative margin

    阅读全文…

  • 圣杯布局

    在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

    基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position

    这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

    在选用布局的时候应该考虑的因数有:

    • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
    • 确保任何一栏为最高栏时不会出问题。
    • 良好的兼容性。
    • 易于修改。
    • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

    下面我就以三栏布局为例对我了解到的几种布局进行分析:

    圣杯布局(Holy Grail Layout)

    Matthew Levine 发布的一种新的布局方式,灵活运用容器的内边距、浮动元素的负边距和相对定位,接近完美的实现了三栏布局。DOM结构也很好,无需额外 标签。但是,我们来看看多达27页的评论吧。圣杯布局最令人头疼的是:在IE6下,左栏经 常会神奇消失!!!(比如将IE6的窗口高度拖小点)评论中还反馈在IE7下也存在不少问题(我测试后,发现在IE7正式版下没问题,评论中的 IE7可能是beta版)。另外在Chrome下表现也有点诡异,需要小小hack. 还有那繁琐的padding, margin, left, right计算,时刻需要一颗清晰的大脑,喝点小酒就彻底晕了……

    技术层面:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position
    • css hack

    阅读全文…

  • 负边距布局

    在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

    基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position

    这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

    在选用布局的时候应该考虑的因数有:

    • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
    • 确保任何一栏为最高栏时不会出问题。
    • 良好的兼容性。
    • 易于修改。
    • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

    下面我就以三栏布局为例对我了解到的几种布局进行分析:

    负边距布局( Negative Margin Layout)

    Ryan Brill 在2004写了一篇文章:Creating Liquid Layouts with Negative Margins. 文中的“发现”立刻让布局世界迎来了“负来负去”的新时代。

    技术层面:

    • 浮动 float
    • 负边距 negative margin

    阅读全文…

  • 坍塌式布局

    在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

    基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position

    这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

    在选用布局的时候应该考虑的因数有:

    • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
    • 确保任何一栏为最高栏时不会出问题。
    • 良好的兼容性。
    • 易于修改。
    • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

    下面我就以三栏布局为例对我了解到的几种布局进行分析:

    坍塌式布局(Collapse Layout)

    这种布局是无意中在浏览国外的网站的时候发现的,粗略看了下觉得还ok。

    技术层面:

    • 浮动 float
    • css hack

    阅读全文…

  • 浮动式布局

    在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

    基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position

    这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

    在选用布局的时候应该考虑的因数有:

    • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
    • 确保任何一栏为最高栏时不会出问题。
    • 良好的兼容性。
    • 易于修改。
    • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

    下面我就以三栏布局为例对我了解到的几种布局进行分析:

    浮动式布局(Float Layout)

    最最最常见的布局,灰常地常见的布局方式,现在的网站所采用的 很大部分就是这种。

    技术层面:

    • 浮动 float

    阅读全文…

  • 绝对定位布局

    在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

    基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position

    这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

    在选用布局的时候应该考虑的因数有:

    • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
    • 确保任何一栏为最高栏时不会出问题。
    • 良好的兼容性。
    • 易于修改。
    • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

    下面我就以三栏布局为例对我了解到的几种布局进行分析:

    绝对定位布局(Absolute Layout)

    绝对定位布局可以说是 出错几率最少的布局,因为他用的是绝对定位嘛,but…

    技术层面

    • 绝对定位 absolute

    阅读全文…

  • table布局

    在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

    基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

    • 浮动 float
    • 负边距 negative margin
    • 相对定位 relative position

    这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

    在选用布局的时候应该考虑的因数有:

    • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
    • 确保任何一栏为最高栏时不会出问题。
    • 良好的兼容性。
    • 易于修改。
    • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

    下面我就以三栏布局为例对我了解到的几种布局进行分析:

    table布局(table Layout)

    可以说是 很早的时期出现的布局方式。

    阅读全文…

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS