3. 自適應CSS排版

一、 CSS的position位置概念

position:static「靜態」這是網頁的預設值。
position:relative 「相對」指的是相對該元素原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。
position:absolute「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用top、bottom、left、right來調整該元素位置。position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。
position:fixed「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用top、bottom、left、right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。
當position:relative包著position:absolute的時候，後者就會以前者的位置為基準，而非整個視窗。

把連結做成按鈕（將Top標籤加入 class=”top”屬性），並讓按鈕有按下去的感覺：

.top {
    font-size:12px;
    color:#fff;
    background-color:#3bb3e0;
    padding:5px 10px;
    border-radius:5px;
    box-shadow: 0px 5px 0px 0px #156785;
}
.top:active {
    position:relative;
    top:3px;
    box-shadow: 0px 2px 0px 0px #156785;
}

二、 CSS的偽元素（pseudo-element）

用::和之前的擬類別（Pseudo-classes）做出區隔，但其實一個:也是可以用的。
「::first-line」：元素中的第一行；「::first-letter」：元素中的第一個字
「::before」：在元素前；「::after」：在元素後插入內容（需和content一起使用）
「::placeholder」：元素的佔位符號；「::selection」：元素被反白時
在按鈕左邊加個箭頭，content亦可用url()來載入外部素材，如圖片等。
```
.top::before{
    content:'▲ ';
}
```

三、將回頂端做成圓形浮動工具

先將HTML縮減為一組，移至頁尾，並用一個 id="float_tool" 的div容器將連接包住。

設定此容器固定在視窗右下角，並將按鈕改成圓形，以方便點擊。

<div id="float_tool">
    <a href="#Home" class="top">Top </a>
</div>

.top {
    font-size: 12px;
    color: #fff;
    background-color: #3bb3e0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 60px;
    text-align: center;
    display: inline-block;
    box-shadow: 0px 5px 0px 0px #156785;
    position: relative;
}

#float_tool{
    position: fixed;
    bottom: 10px;
    right: 10px;
}

四、加入簡易的平順滑動

https://github.com/GabrielDelepine/smooth-scroll
下載解壓，並將smooth-scroll.js放置和index.html同一層。

將以下語法加入到頁尾即可。

<script src="smooth-scroll.js"></script>

五、自適應排版

先在HTML中加入viewport設定：網頁寬度預設為屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔屏幕面積的100%。
<meta name="viewport" content="width=device-width, initial-scale=1">
寬度用百分比：CSS中將包住整體頁面的container寬度設成百分比，例如width: 90%;
字型大小改用em取代px
圖片可加入max-width:100%; 來達成自動等比例縮小效果

六、利用媒體查詢來動態調整版面

先把主要的幾個大區塊整理一下，確立基本架構：

.container {
    box-sizing: border-box;
    margin: 0px auto;
}
article {
    display: table-cell;
    vertical-align: top;
}
aside {
    display: table-cell;
    background: rgba(141, 190, 178, 0.2);
    vertical-align: top;
}

螢幕解析度 1024 以上時：@media screen and (min-device-width: 1024px){CSS宣告}

.container {
width: 90%;
}
article {
width: 75%;
padding: 30px;
}
aside {
width: 25%;
}

螢幕解析度 768 以上，1024 以下：@media screen and (min-device-width: 768px) and (max-device-width: 1024px){CSS宣告}
```
.container {
    width: 90%;
}
article {
    width: 75%;
    padding: 30px;
}
aside {
    width: 25%;
}
```

螢幕解析度 768 以下：@media screen and (max-device-width: 768px) {CSS宣告}

.container {
    width: 98%;
}

article {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}
aside {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

七、 Flexbox彈性盒初體驗

可以手動玩一下：http://wcc723.github.io/WorkShop-gh-pages/cssFlex/

版面架構可改成：

.container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0px auto;
}
.row {
    display: flex;
    background: rgba(255, 255, 255, 0.8);
}
article {
    vertical-align: top;
}
aside {
    background: rgba(141, 190, 178, 0.2);
    vertical-align: top;
}

螢幕解析度 768 以下：@media screen and (max-device-width: 768px) {CSS宣告}

.row {
    display: flex;
    flex-direction: column;
}
article {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

aside {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

2-2 style.css