線上書籍

一、 CSS的position位置概念

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

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

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

1. 先將HTML縮減為一組，移至頁尾，並用一個 id="float_tool" 的div容器將連接包住。
2. 設定此容器固定在視窗右下角，並將按鈕改成圓形，以方便點擊。 <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; }

 

四、 加入簡易的平順滑動

1. https://github.com/GabrielDelepine/smooth-scroll
2. 下載解壓，並將smooth-scroll.js放置和index.html同一層。
3. 將以下語法加入到頁尾即可。 <script src="smooth-scroll.js"></script>

五、 自適應排版

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

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

1. 先把主要的幾個大區塊整理一下，確立基本架構： .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; }

    

2. 螢幕解析度 1024 以上時：@media screen and (min-device-width: 1024px){CSS宣告} .container { width: 90%; } article { width: 75%; padding: 30px; } aside { width: 25%; }
3. 螢幕解析度 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%; }
4. 螢幕解析度 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彈性盒初體驗

1. 可以手動玩一下：http://wcc723.github.io/WorkShop-gh-pages/cssFlex/
2. 版面架構可改成： .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; }
3. 螢幕解析度 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; }