雙飛翼布局和聖杯布局

2021-09-23 01:45:09 字數 618 閱讀 5265

聖杯布局與雙飛翼布局針對的都是三列左右欄固定中間欄邊框自適應的網頁布局(想象一下聖杯是主體是加上兩個耳朵;鳥兒是身體加上一對翅膀),聖杯布局是kevin cornell在2023年提出的乙個布局模型概念,在國內最早是由**ued的工程師(傳說是玉伯)改進並傳播開來,在中國也有叫法是雙飛翼布局,它的布局要求有幾點:

三列布局,中間寬度自適應,兩邊定寬;

中間欄要在瀏覽器中優先展示渲染;

允許任意列的高度最高;

雙飛翼布局下面我們看看具體的實現方法。

html部分:

中間部分

左邊右邊

css部分:

.left,.right

.left

.right

.container

.main

聖杯布局下面我們看看具體的實現方法。

html部分:

中間

左邊右邊

css部分:

section

section div

.left,.right

.left

.right

.main

聖杯布局 雙飛翼布局

前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局,一聽這兩個名字,覺得不明覺厲,其實就是三欄布局,左右兩邊的盒子寬度固定,中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局,方法一 container middle left right style head ...

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局,即中間是主要內容main content,然後是左邊側欄,一般是 的分類資訊,右邊欄就是一些附屬功能,最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰,分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding,left的margin left和left值,right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...