雙飛翼和聖杯不同的是，雙飛翼在<main>裏面放一個子元素。聖杯是在外面包一個父元素。
html css基本設定，大致一樣，只差
<body>
<header>header</header>
<main class="column">
<div id="center_block">main的子元素</div>
</main>
<aside id="left" class="column">left</aside>
<aside id="right" class="column">right</aside>
<footer>footer</footer>
</body>
body, h1, h2, h3, p, ul, ol, li, th, td, img{
margin: 0px;padding: 0px;
}
.column{
float:left;
height:50px;
}
header{
text-align: center;
background-color:aquamarine;
}
main{
background-color: black;
width: 100%;
color: darkgrey;
}
#left{
background-color:crimson;
width: 300px;
}
#right{
background-color: cadetblue;
width: 200px;
}
footer{
clear:both;
background-color:darkgoldenrod;
}
<div id="center_block">設定margin向外推出左右空位。再用margin-left讓左右欄回巢。
#center_block{
margin-left:300px;
margin-right:200px;
}
#left{
margin-left:-100%
}
#right{
margin-left:-200px;
}
相似的地方，我覺得有三點，
不同的我整理在表格。下面兩張gif圖，在展示瀏覽器視窗縮小到一定程度時，先不見的是哪一欄。
時間：9/9 01:26PM
音樂： 男孩 梁博
飲料：白開水
地點：房間的深藍色皮沙發
狀態：肚子餓的概念
其實這原本是DAY3的後半篇，但考慮到目標受眾是幼鳥等級的，一篇的量有點太長，怕幼鳥們看不下去，或是吸收不好，覺得太硬
所以拆成兩篇，不知道這樣會不會對閱讀品質提升 
iThome鐵人賽
看影片追技術