一：聖杯布局
重點：content的padding，left的margin-left和left值，right的margin-left和right值：
lang="en">
charset="utf-8">
聖杯布局title>
* .header
.content
.content
.main
.content
.left, .content
.right
.content
.left
.content
.right
.footer
style>
head>
class="header">headerdiv>
class="content">
class="main">maindiv>
class="left">leftdiv>
class="right">rightdiv>
div>
class="footer">footerdiv>
div>
body>
html>頁面效果：
二、雙飛翼布局
重點：main外麵包了一層main-wrap，main-warp的寬度、浮動，main的margin，left、right的margin-left。
lang="en">
charset="utf-8">
雙飛翼布局title>
* .header
.content
.content
.main-wrap
.content
.main-wrap
.main
.content
.left, .content
.right
.content
.left
.content
.right
.footer
style>
head>
class="header">headerdiv>
class="content">
class="main-wrap">
class="main">maindiv>
div>
class="left">leftdiv>
class="right">rightdiv>
div>
class="footer">footerdiv>
div>
body>
html>頁面效果：
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...
聖杯布局和雙飛翼布局
聖杯布局 title style type text css body 2.設定container的樣式 container 3.設定middle left right的公用樣式 middle,left,right 4.設定middle的樣式 middle 5.設定left的樣式 left 6.設定...