>聖杯布局
title
>
<
style
type=
"text/css"
> *
body
/* 2.設定container的樣式 */
.container
/* 3.設定middle left right的公用樣式 */
.middle,.left,.right
/* 4.設定middle的樣式 */
.middle
/* 5.設定left的樣式 */
.left
/* 6.設定right的樣式 */
.right
<
/style
>
head
>
<
body
>
<
divclass=
"container"
>
<
divclass=
"middle"
>
div>
<
divclass=
"left"
>
div>
<
divclass=
"right"
>
div>
div>
body
>
html
>
>雙飛翼布局
title
>
<
style
>
* /* 2.設定main sub extra的共有樣式 */
.main,
.sub,
.extra
/* 3.設定main和main-inner的樣式 */
.main
.main-inner
/* 4.設定sub的樣式 */
.sub
/* 5.設定extra的樣式 */
.extra
<
/style
>
head
>
<
body
>
<
divclass=
"main"
>
<
divclass=
"main-inner"
>
div>
div>
<
divclass=
"sub"
>
div>
<
divclass=
"extra"
>
div>
body
>
html
>
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 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...