這門在 Hahow 好學校 上架的【零基礎轉職！網頁設計 HTML、CSS 快速入門】線上課程，不僅帶你從零基礎開始學習，更運用講師獺斯特曾經在職場上的經驗，回推設計成這門課，並在許多單元中提供練習方向，讓大家可以跟上腳步，真正學會網頁設計！

這門課究竟好在哪裡？又有哪些特色呢？這篇會充分讓大家了解！

網頁設計教學課程推薦的 5 大理由

我推薦這門課的 5 大理由：

1. 由職場經驗回推設計而成的課程
2. 零基礎入門教學，適合初學者
3. Live Coding 的教學方式
4. 課程中有充足的練習機會
5. 不依賴框架製作 RWD 響應式設計

以上 5 大理由是學習網頁設計的過程中相當重要的，以下我們分別說明每項推薦理由吧！

由職場經驗回推設計而成的課程

大部分查詢到的網頁設計課程資源，要馬是教你基礎中的基礎，不然就是跳太快，想要快速轉職真的有困難！

而這門課是由待過職場的網頁設計師獺斯特開設而成，內容標榜是由職場經驗回推設計而成，同時又是零基礎友善課程，這樣一來，只要從頭學一次，還能同時了解職場中常見的應用呢！

不僅一舉兩得，基礎就再也不會只是基礎、沒常用就遺忘，而是成為可以應用的技能，對未來轉職的幫助一定比純基礎的教學內容還要實用啊！

零基礎入門教學，適合初學者

標榜「零基礎」的線上課程，其實有很多都不完全是零基礎！

有些有標示需要先有 HTML、CSS 相關知識才能上的課，你還能知道那不算是零基礎，甚至有些連標示都沒有，就超容易上到一半放棄的！😅😅

這門課從課程說明就可以發現，前大半的課程都在基礎教學，從基礎概念開始，一路到實作開啟檔案、從無到有撰寫等，表示這是一個對零基礎比較友善的課程，推薦大家可以多觀察課程說明和課程大綱是否符合你想像中的需求！

Live Coding 的教學方式

程式碼的教學一定要用 Live Coding 的教學方式啊！

這個方式就是講師直接打出程式碼給你看，並且用螢幕錄影的方式教學，這樣的方式才不會像有些只使用 PPT 帶過的講師，用講的很容易，寫都寫不出來啊！

課程中有充足的練習機會

當課程沒有給予足夠的練習機會或給予練習方向，學習任何東西，如果不使用都會漸漸淡忘的，程式碼也是要使用越多，才能越熟練！

這門課除了綜合練習的大型作業會在 Hahow 好學校的課程作業批改區之外，部分需要多加練習的單元也會出「小練習」給大家練習，透過相同類型的實際練習，更有機會快速跟上課程的進度。

而且這門課光是看課綱就知道，是相當紮實的實戰課程，學完直接能快速上手應用，是我們學習線上課程最主要的目的之一！🎯

不依賴框架製作 RWD 響應式設計

現在很多網頁設計課程標榜可以節省開發時間，會使用各種 CSS 框架或前端框架。

但是基礎都沒打好、也完全不懂原理，卻要直接學習框架來寫程式，這真的是跳太快了，對於初學者來說這會難以吸收！而且不依賴框架的 RWD 響應式設計，若用原生 CSS 處理也能節省不少效能的啊！

更重要的是，如果只會使用框架，卻不熟基本語法，在基底不穩的情況下，未來遇到不同框架要修改的時候，就會完全無法靠基本功修改，搞得對程式好像有點熟又好像不熟… 挫折感會相當重！

因此純 HTML + CSS 的教學內容，同時還能製作出 RWD 響應式設計，一定能讓你打下相對完整的程式基礎！

總結

以上就是對於這門在 Hahow 好學校 上架的【零基礎轉職！網頁設計 HTML、CSS 快速入門】課程，大力推薦的 5 大理由！

你也想零基礎入門網頁設計嗎？還是你也想快速轉職成為工程師呢？就透過這門課，手把手帶你從零基礎轉職吧！

延伸閱讀：

• 學程式要選哪個程式語言？給零基礎自學者的推薦(課程講師獺斯特撰寫)
• Font Awesome 教學-Icon圖示取代文字的按鈕
• 什麼是::before和::after？CSS偽元素怎麼用[實作範例]

會以 SCSS 為主而非 SASS 原因是個人習慣看有大括號的樣式檔，因此雖然安裝插件和設定檔不分 SASS 或 SCSS ，但本篇介紹文內容會以 SCSS 為主噢！

熟悉 CSS 之後為什麼會想學預處理器 SCSS 呢？主要是考慮到如何在主管或客戶要求：「做另一個版本把藍色主色換成綠色、圓角少一點、陰影重一點看看！」
遇到這種要求的時候，如果只有純 CSS ，要改的地方可就多了。

預處理器 SCSS 的好處就是這些改檔案的需求可以用變數來處理，雖然預處理器可以寫函數，功能相當強大，但對初學者來說光是學會將顏色、圓角、陰影這些歸納成變數，就已經是網頁設計福音了！

會想撰寫這篇就是因為，我當時光是環境設定和輸出路徑也搞了一陣子@@
讓我手把手帶你設定一遍吧！

建立 SCSS 檔案

首先我們先在建立檔案的地方新增檔案，下圖中是我用xampp所以路徑在xampp下的htdocs，
雖然我建立的是.php檔案，但.html的靜態網站也可以，完全不影響這次教學的插件安裝設定。

然後我們要先建立好scss和css資料夾，我們設定時主要只會用到這2個資料夾來測試有沒有成功設定好路徑噢。

接著在scss資料夾中新增一個style.scss檔案。

SCSS 寫入測試用的樣式內容

再來我們可以在scss檔案中寫下簡單的測試樣式：

/* 用$開頭設定scss變數 */
$color: red;

/* 使用scss設定的變數 */
body{
 background: $color;
}

scss好處就是我們可以使用$錢字號來設定變數，測試樣式我們用顏色來當範例。

使用時前面只要前面有加上$就會帶變數進來，這樣要改的時候就只要改變數內容，就可以統一將所有網頁的顏色改變了，超方便的吧！

寫好之後就來安裝「 Live Sass Compiler 」插件，讓 VS Code 自己幫你把scss編譯並生成css吧！

安裝 VS Code 插件 Live Sass Compiler

「Live Sass Compiler」 這個插件，可以讓你在每次存檔的時候，就自動幫你從scss轉換到css一次，因此第一次轉換後還可以同時開啟scss和轉換好的css檔案，未來還可以即時比對轉換結果。

我們到 「 延伸模組 」 > 找「Live Sass Compiler」 > 按下「安裝」按鈕。

安裝好之後，再來要進入設定檔案來設定輸出路徑等相關設定囉！

開啟 VS Code 的設定檔案

修改 VS Code 「受限模式」為「信任」

通常想要在 VS Code 開啟設定檔案 settings.json 檔案前，你需要先將左下角的受限模式改成信任，因此我們到左下角點一下「受限模式」開啟模式設定。

點選「信任」按鈕。

再來我們就可以放心去開啟設定檔囉！

開啟 VS Code 設定檔

選擇左上角的「檔案」 > 「喜好設定」 > 「設定」。

開啟後會出現下面這個畫面，我們直接找選單中「延伸模組」 > 「Live Sass Compiler」 > 找到Formats的「在settings.json內編輯」按鈕點下去。

再來就是直接在設定檔中，手動打上你想要設定的內容。

手動設定輸出路徑

點下去後可以打上以下程式碼：

"liveSassCompile.settings.formats": [
    
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
]

其中，savePath就是scss自動編譯成css檔案的輸出路徑囉！

當時 savePath 這條設定我搞半天都沒有效，最後是發現前面要多個 ~/ 符號才設定成功，這符號有些是用在「應用程式根目錄」，如果單純的 / 符號是從網站根目錄，不過有些網路範例並沒有寫到 ~/ 符號就能有效果。

補充：
format：指編譯後的 CSS 格式。
expanded 未壓縮
compressed 壓縮
extensionName：指檔案編譯後產生的副檔名。

到這邊基本設定就完成了，開始來測試自動轉換的強大功能吧！

測試將scss轉換成css檔

我們回到scss檔案，右下角因為安裝了 Live Sass Compiler 插件而出現了 Watch Sass 按鈕。

如果你的插件才剛安裝好，卻沒有出現這個按鈕時，通常重新啟動 VS Code 就會出現囉。

那我們就按下 Watch Sass 按鈕。

緊接著會跳出一塊視窗，顯示「Watching…」，這就表示已經成功啟用插件，並且開始監聽你的程式，只要你在scss檔案中按下存檔，就會自動幫你轉換成css檔案囉！

所以這邊我們就按下存檔吧。

存檔後出現下圖畫面，紅色框起來的地方就是轉換成css檔案後存放的位置，也就是我們剛剛設定的輸出路徑！

因此我們可以到檔案總管去看看有沒有成功製造出css檔案了。

這樣就能看到插件自動幫你生成好css檔案，並放在指定的資料夾中了！

你可以看到除了css檔案外，還有另一個.map檔案，這個檔案只是這個插件生成的路徑檔，不想生成的話只要到settings.json輸入以下語法就可以不生成.map檔了。

"liveSassCompile.settings.generateMap": false

務必記得你在設定檔中，
每一個項目之間要有「,」逗號當作間隔噢！

scss完成轉換後的css檔案呈現

最後就來看看成果吧！

我們把css檔案打開，原本的$color就自動替換成我們設定的顏色囉！

使用scss新手疑問

這邊多給我們的讀者一個新手容易遇到的小問題，大部分去看介紹文章可以看到許多用法，像是@mixin、@include等引用的基本用法。

這邊要介紹的小技巧是在使用上更基本，但新手容易出錯的用法：#{變數}

我們先把scss和css檔案同時開啟就能比較出問題點：

上圖可以發現，$ax-header-h: 66px; 是我原先自訂的一個變數。

當我想要用css的內建運算公式calc()語法，但如果只寫下面這樣：

/* 會轉換失敗的寫法 */

height: calc(100vh - $ax-header-h);

是沒有辦法成功被轉換的！

這時候要使用#和{ }把變數包起來，像下面這樣的程式碼寫法：

/* 成功轉換的scss寫法 */

height: calc(100vh - #{$ax-header-h});

就可以順利轉換囉！

總結

以上就是這篇使用 VS Code 的 Live Sass Compiler 插件，自動編譯 SCSS 成 CSS 檔案，並且把編譯後的檔案放置在你指定的位置中。

未來再也不怕主管或客戶突然想更換網頁顏色，否則100個頁面要改上百個顏色真的會頭昏昏腦脹脹，使用 SASS 或 SCSS 預處理器，幫你完成高效率的修改吧！

• 什麼是::before和::after？CSS偽元素怎麼用[實作範例]
• CSS position 屬性教學：relative和absolute實作
• RWD教學-只要兩行就能輕鬆見效的實作經驗

還不知道怎麼使用CSS的position相對位置屬性可以按下方連結延伸閱讀，讓你的偽元素應用更廣泛呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

這裡跟各位讀者聊一下我當初在學習偽元素的經歷，當時自學CSS之後，對於偽元素其實並沒有碰過，學習的課程中也完全沒有提過這個方法。

於是當我到職場上，發現這個東西的時候，一開始只覺得好像很神奇，可以透過CSS就完成增加文字內容在段落前後，完全不用去改HTML或內文。

但後來發現怎麼有些標題附近的裝飾，好像也是用偽元素做出來的！？

於是開始研究怎麼生出那些東西，這完全考倒我了，我花了超級大把的時間爬文試圖了解這個東西！
但我無論怎麼研究，就是各種卡關，很多網站的程式碼範例是已經簡化、合併過的，讓我反而越來越搞不清楚到底如何使用它。

今天這篇文章，帶你從頭了解一次，並且用最簡單的範例，實作出加入內文的程式碼，以及實作當時我搞不懂的標題裝飾！

也強烈建議大家一邊實作，讓自己慢慢體會這個概念，最後這技巧才會是你的呦！

初學偽元素::before和::after

什麼是「偽元素」？

「偽元素」英文是「Pseudo」，可以用CSS「憑空創造」一個區塊出來，而且在HTML程式碼後台你並不會看到它存在，但在網頁F12開發人員工具時可以看到。

偽元素實作上常用的有::before、::after、::selection三種，而你會看到它們都有兩個冒號開頭，這跟:hover、:active等操作型的偽類做出區別。

雖然據說有些比較沒有習慣這樣區分的工程師不小心只使用了一個冒號，執行上好像也有成功，但養成好的習慣，也是避免未來程式需要花更多時間debug的好方法噢！

「偽元素」如何運作的？

這個東西簡易來說，是一個可以讓你僅透過CSS檔案，就能增加東西在HTML內文的方式。

實務應用上除了加入文字內容，還能增加各種不同的東西在畫面上，也可以搭配position屬性，讓你增加的東西漂浮在頁面任何你希望他存在的位置呦！

聽起來超厲害的吧！
這邊就透過範例來說明囉！

偽元素::before和::after實作範例

HTML基本設定

想一步一步搞懂的大家，也建議可以直接開啟你的編輯器，懶得打程式碼的話，就算是複製貼上看看效果也好，只有把範例看過去的話有時候也比較難吸收呦！

<!-- HTML -->

<div class="intro">我是艾咖Aikko！</div>

CSS我們先留空，HTML用一個<div>標籤寫下自我介紹，並且給予它一個class當作等等要在CSS使用的樣式名稱。

上方程式碼的結果會顯示這樣：

加上CSS偽元素

接下來我們試著加上偽元素::before和::after的CSS吧！

/* CSS */

.intro::before{
  content: "嗨！大家好，"; /*加入這些內容在整個<div>的前面*/
  color: blue; /*字體為藍色*/
}

.intro::after{
  content: "請多指教！"; /*加入這些內容在整個<div>的後面*/
  color: green; /*字體為綠色*/
}

::before就是可以將創建的內容直接放在整塊<div>標籤內容的前面；
::after則是放在後面，想加入的文字內容可以直接放在content的屬性當中，呈現結果如下：

用顏色區分就更清楚了，有沒有發現HTML內容完全不用變更，靠著CSS就能加入內容到HTML，完全是我這種底層工程師改不到HTML時的福音啊！

到這裡，你已經學會最簡易的偽元素應用了，趕緊消化練習一下，緊接著我們讓它有更廣泛的應用吧！

偽元素::before或::after輕鬆完成網頁的點綴和線段

網頁的點綴和線段範例

實際到Pinterest找一個有所謂的標題旁點綴元素，像下圖中”HOME >> 99 INSPIRATIONAL…”那段下方橘色長方體，這就可以用偽元素將它製造出來：

配合相對位置設定，偽元素隨你放！

還不清楚相對位置position的relative和absolute如何設定嗎？
建議先到下方文章練習看看比較容易看得懂呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

那我們將剛剛的HTML改成圖片上的那串英文，並先將CSS留空：

<!-- HTML -->

<div class="intro">HOME >> 99 INSPIRATIONAL WEBSITE DESIGN TEMPLATES FOR 2020</div>

呈現如下：

接下來我們將CSS部分完成：

這裡先來個小提醒，就算沒有使用到content屬性，也一定要寫這個屬性，content屬性和::before、::after是生命共同體！
雙引號內容留空也沒關係，但是不寫的話就不會有作用呦！

/* CSS */

/*那整塊<div>標籤*/
.intro{
  position: relative; /*將整塊<div>當作基準位置*/
  width: 516px; /*設定寬度，讓偽元素的寬度直接設100%*/
}

/*新增的偽元素*/
.intro::before{
  content: ""; /*沒用到仍然要寫，雙引號內容留空*/
  width: 100%; /*設定長方形寬度*/
  height: 10px; /*設定長方形高度*/
  background: #ff7600; /*設定長方形顏色*/
  position: absolute; /*設定與<div>區塊的相對位置*/
  left: 0px; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
  top: 100%; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
}

完成樣式如下：

超快速的吧！

到這邊雖然已完成，但也許你心中會有幾個疑惑，我來為大家解答一下。

解決你內心的疑惑

第一個疑惑：
那如果是用::after來寫的話可以嗎？
答案是當然可以！

因為一旦使用了position相對位置屬性後，就直接擺脫了你加的內容是要放在後面還是前面，而是直接按照position相對位置的設定改變位置囉！

第二個疑惑：
為什麼是用.intro這個<div>標籤當作基準呢？
這時我們要到網頁的F12開發人員工具來看看他們的階層關係：

從網頁F12開發人員工具我們可以發現，你剛剛用CSS創造的偽元素::before就在<div>標籤的下一層！
也就是說，::before這個元素你可以想成是一個標籤區塊，套用position相對位置設定後，偽元素設定position:absolute;屬性後的父元素就是<div>標籤區塊了。

因此，我們將<div>標籤區塊設定一個position:relative;屬性，來作為偽元素的基準位置。

這樣你就可以透過top和left等位置屬性，任意調整你創建的偽元素區塊位置了！

::before和::after實務上要小心的地方

使用時務必務必要小心的就是：
::before和::after一定要加入content屬性才會有作用！！！
這點一定要星號再星號⭐⭐⭐⭐⭐

就算沒有要加入文字，也一定要有content屬性，內容留空即可，像這樣：

/* CSS */

.intro::before{
  content: ""; /*雙引號中留空，但必須存在*/
  /*其他屬性設定*/

}

否則若沒有content屬性，你怎麼設定都是無效的呦！！！

就連我之前寫的時候偶爾也會忘記，然後再那邊debug老半天甚至還重複清掉cookie，懊惱為何沒有效果，最後才發現content屬性沒加到偽元素的設定中所以無效，真的是費心又耗時啊！

總結

以上就是最基礎、最基礎的偽元素::before和::after介紹，希望經過這些最基本的說明與範例實作，讓大家不用像我一樣花大把時間還一直搞不懂這在幹嘛！

而偽元素的應用超級廣泛，還能包刮用偽元素創建一個大於符號的箭頭，只要::before和::after分別產出一個長方形並傾斜，就能產出一個純程式碼的箭頭囉！

所以一旦你學會偽元素::before和::after的應用，它的優點就是自由度極高！！
還有只要你有一個HTML標籤作為基底，每一個標籤你都可以建立::before和::after兩個新的區塊出來，讓你不用修改HTML就能完成一堆實用的效果囉！

• Font Awesome教學-Icon圖示取代文字的按鈕
• CSS position 屬性教學：relative和absolute實作
• 純CSS製作HTML頁籤切換的效果與實例
• RWD教學-只要兩行就能輕鬆見效的實作經驗
• Radio button和Checkbox放大並自訂樣式

• fixed
• sticky
• relative
• absolute

其中，前兩者普遍用於網頁導覽列、彈跳視窗等功能；
後兩者則可以用在各式各樣的相對位置當中，是個非常實用的排版屬性！

這篇主要帶大家了解relative和absolute屬性，以及相對位置究竟該怎麼進行設定吧！

CSS position 相對位置入門定義

相對位置的概念，我們以最粗糙的舉例來說：

視窗內出現英文字母並呈現：「AB」
我們如果先放上「A」為基準位置，並把「B」設在「A」的右邊，呈現出來就會是「AB」了。

此時的「A」作為基準，因此「A」的CSS設定即為position:relative;
而「B」相對於「A」放置在右邊，因此「B」的CSS設定即為position:absolute;

但事實上CSS實作還包括了內外關係，也就是說通常外層是position:relative; 內層為position:absolute; 內層的內容就會以外層的左上角為基準進行相對於外層的移動。

position relative和absolute實作範例

這裡帶大家實作一個最簡單的範例，讓大家方便理解兩者相對位置關係。

首先，HTML部分放上兩層的div，分別給予class，內容皆留空即可：

<!-- HTML -->

<div class="relative_outside">
  <div class="absolute_inside">
    <!-- 留空 -->
  </div>
</div>

接下來，先完成最基本的class設定：

/* CSS */

/* 紅色外層 */
.relative_outside{
  position: relative; /* 基準設為relative */
  width: 100px;
  height: 100px;
  background: red; /* 設為紅色 */
}

/* 綠色內層 */
.absolute_inside{
  position: absolute; /* 相對者設為absolute */
  width: 100px;
  height: 100px;
  background: green; /* 設為綠色 */
}

設完HTML和CSS後，你會了解到幾件事：

1. 現在有兩個寬高皆為100的正方形，一個是外層紅色、一個是內層綠色。
2. 外層紅色正方形當作基準；
   內層綠色正方形為相對於紅色正方形的相對物件。
3. 兩者有階層關係，綠色雖然大小相同，但實際上HTML是在內層。

此時設定完會長這樣：

沒錯，目前只看到一個綠色正方形，原因是紅色正方形和綠色正方形的位置相同、大小也相同，因此綠色正方形蓋在紅色正方形上面。

透過absolute新增位置屬性錯開位置

接下來，我們將position:absolute;的綠色正方形，加上top和left的位置屬性，top屬性：垂直與上方的距離；left屬性：水平與左邊的距離。

新增如下：

/* CSS */

/* 綠色內層 */
.absolute_inside{
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;

  /* 加上下面兩個屬性 */
  top: 100px;
  left: 100px;
}

這時候的意思就是，綠色的正方形會相對於紅色正方形往下推100px以及往右推100px。

完成就會是上圖所示，可以將這個範例的程式碼放到你的程式碼進行測試，並且玩玩看修改top和left屬性，就會更好理解相對位置的功用了。

相對位置以座標來解釋

如果還是覺得有點模糊難以理解，我個人覺得也許比較好的解釋就是用座標來看。

CSS世界中，物件的左上角可以視為XY座標的(0,0)，該物件內容則是從(0,0)開始往右、往下延展出一個物件。

也就是例如紅色正方形，是從左上角(0,0)各延展100px而生成這個正方形的；綠色也是同樣概念延展出正方形。

紅色正方形左上角為(0,0)，綠色正方形設定相對於紅色正方形的位置中，top即為與頂端的距離100px；left為與左側的距離100px。

因此理解後會變成往下及往右各推100px，最後綠色正方形就會推至座標為(100,100)的位置如上圖所示。

總結

以上就是帶大家透過範例及程式碼，快速入門position屬性的應用，最後透過國中數學的座標概念來進一步記憶相對位置的用法，希望無論你是前端還是剛接觸CSS的人，都能快速上手呦！

• RWD教學-只要兩行就能輕鬆見效的實作經驗
• 純CSS製作HTML頁籤切換效果
• 純CSS將Radio button美化與開關型整理(上)
• 純CSS將Radio button美化與開關型整理(下)
• Radio button和Checkbox放大並自訂樣式

當然也是可以做到，但如果想搭配撈資料那些跟後端溝通的模式，甚至為了方便維護的話，純CSS未必會是最佳解。

像後來熟悉Javascript後，就會變成CSS搭配Javascript來完成頁籤切換，撰寫的程式碼也比較精簡好閱讀、好維護，CSS也能專注在美化功能就好。

這篇先教大家純CSS能怎麼做到頁籤切換效果，之後有機會再教大家用更便利的Javascript完成頁籤切換吧！

純CSS製作HTML頁籤切換效果

開始看程式碼之前，先看一下完成後的樣式：

只要按下上面的頁面1、頁面2等頁籤，就能切換下方顯示的內容。

如下圖就是切換成頁面1時，下方會呈現頁面1的內容。

緊接著開始程式碼的撰寫囉，HTML部分：

<!-- HTML -->

<span id="tab-1">主頁</span>
<span id="tab-2">頁面1</span>
<span id="tab-3">頁面2</span>
<span id="tab-4">頁面3</span>

<!-- 頁籤按鈕 -->
<div id="tab">
    <ul>
        <li><a href="#tab-1">主頁</a></li>
        <li><a href="#tab-2">頁面1</a></li>
        <li><a href="#tab-3">頁面2</a></li>
        <li><a href="#tab-4">頁面3</a></li>
    </ul>

    <!-- 頁籤的內容區塊 -->
    <div class="tab-content-1">
        <p>主頁面顯示的內容</p>
    </div>
    <div class="tab-content-2">
      <p>頁面1顯示的內容</p>
    </div>
    <div class="tab-content-3">
      <p>頁面2顯示的內容</p>
    </div>
    <div class="tab-content-4">
      <p>頁面3顯示的內容</p>
    </div>
</div>

CSS的部分：

/* CSS */

#tab {
    width: 400px;
    background: #1caa5d;
    border: solid 1px #1caa5d;
}

/* 頁籤ul */
#tab > ul {
    /* overflow: hidden; */
    margin: 0;
    padding: 10px 20px 0 20px;
}

#tab > ul > li {
    list-style-type: none;
}

/* 頁籤上的文字 */
#tab > ul > li > a { 
    text-decoration: none;
    font-size: 15px;
    color: #333;
    float: left;
    padding: 10px;
    margin-left: 5px;
}

/*頁籤div內容*/
#tab > div {
    clear: both;
    padding: 0 15px;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/*第一筆的底色*/
span:target ~ #tab > ul li:first-child a {
    background: #1caa5d;
}

span:target ~ #tab > div:first-of-type {
    visibility: hidden;
    height: 0;
    padding: 0 15px;
}

/*頁籤變換&第一筆*/
span ~ #tab > ul li:first-child a,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
    background: #fff;
    border-radius: 5px 5px 0 0;
}

span ~ #tab > ul li:first-child a::before,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"]::before,
#tab-2:target ~ #tab > ul li a[href$="#tab-2"]::before,
#tab-3:target ~ #tab > ul li a[href$="#tab-3"]::before,
#tab-4:target ~ #tab > ul li a[href$="#tab-4"]::before {
    background-color: white;
    height: 100%;
}

/*頁籤內容顯示&第一筆*/
span ~ #tab > div:first-of-type,
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4 {
    visibility: visible;
    height: 200px;
    background: #fff;
}

span {
    display: none;
}

總結

剛開始學習HTML和CSS的時候，面對這種比較稍微複雜的CSS通常也需要一些時間理解，其實後來知道用更便利的Javascript來完成頁籤之後，有些CSS語法就漸漸也沒有再使用了。

因此，我建議適合學習純CSS完成頁籤功能的人有以下兩種：
第一，你是網頁程式設計初學者，能多學任何語法都是進步；
第二，你是一個UI/UX工程師，因為受限於能動的檔案不多，改不到或沒辦法加入Javascript的人，那麼純CSS完成某項功能就會相當實用噢！

• 純CSS將Radio button美化與開關型整理(上)
• 純CSS將Radio button美化與開關型整理(下)
• RWD教學-只要兩行就能輕鬆見效的實作經驗

還沒看上集嗎？
直接點選下方網址回顧上集教學吧！
連結：純CSS將Radio button美化與開關型整理(上)

這裡整理了三種不同樣式的變化型，先從單純只有左右和顏色辨別ON和OFF的種類開始，到文字在操作鈕上的版本。
通常我們操作時，使用習慣是操作鈕靠左為OFF；靠右為ON，當然，最好還能透過顏色區分進行識別。

直接來看各版本的最終呈現樣貌及程式碼吧！

Radio button變化型 – 無字大圓版

首先是無字大圓版本，先來看看最終結果會長這樣：

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_bigbutton">
    <input type="checkbox" class="cktoggle_bigbutton_checkbox" id="cktoggle_bigbutton_id" checked>

    <label class="cktoggle_bigbutton_label" for="cktoggle_bigbutton_id">
        <span class="cktoggle_bigbutton_inner"></span>
        <span class="cktoggle_bigbutton_circle"></span>
    </label>
</div>

接著是CSS的部分：

/* CSS */

/* ************************
    大圓版本開始
************************ */

.cktoggle_bigbutton {
    position: absolute;
    width: 70px; /* 全按鈕寬度 */
    top: 170px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_bigbutton_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_bigbutton_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    /* border: 2px solid #156812; */
    border-radius: 25px;
}

/* 背景 */
.cktoggle_bigbutton_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_bigbutton_inner:before, .cktoggle_bigbutton_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 22px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_bigbutton_inner:before { 
        content: "";
        padding-left: 10px;
        background-color: #7fd293;
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_bigbutton_inner:after { 
        content: "";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_bigbutton_circle { 
    display: block;
    width: 26px; /* 小圓寬度 */
    height: 26px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #10b736;
    position: absolute;
    top: -5px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 50px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #2f8442; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: all 0.3s ease-in 0s;
}

/* 當unchecked時，小圓顏色變換 */
.cktoggle_bigbutton_checkbox:not(:checked) + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle {
    background-color: #ececec;
    border-color: #b7b7b7;
}

/* label和背景的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle { 
    right: -10px;
}

/* ************************
   大圓版本結束
************************ */

Radio button變化型 – 方形版

再來同樣是左右，但將整個外框製作成圓角方形，並將操作鈕做成類似反光效果。

最終結果會長這樣：

程式碼HTML如下：

<！-- HTML -->

<div class="cktoggle_square">
    <input type="checkbox" class="cktoggle_square_checkbox" id="cktoggle_square_id" checked>

    <label class="cktoggle_square_label" for="cktoggle_square_id">
        <span class="cktoggle_square_inner"></span>
        <span class="cktoggle_square_circle"></span>
    </label>
</div>

CSS部分如下：

/* CSS */

/* ************************
    方形版本開始
************************ */

.cktoggle_square {
    position: absolute;
    width: 120px; /* 全按鈕寬度 */
    top: 280px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_square_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_square_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #2d54ad;
    border-radius: 8px;
    transition: border 0.3s ease-in 0s;
}

/* 背景 */
.cktoggle_square_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_square_inner:before, .cktoggle_square_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 42px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_square_inner:before { 
        content: "ON";
        padding-top: 2px;
        padding-left: 10px;
        background-color: #55a1ff;
        background-image: linear-gradient(to bottom,#398bf1,#88bdff);
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_square_inner:after { 
        content: "OFF";
        padding-top: 2px;
        padding-right: 10px;
        background-color: #EEEEEE;
        background-image: linear-gradient(to bottom,#cccccc,#EEEEEE);
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_square_circle { 
    display: block;
    overflow: hidden;
    width: 48px; /* 小圓寬度 */
    height: 42px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #f5f5f5;
    position: absolute;
    top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 66px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #c1c1c1; /* 小圓外框顏色 */
    border-radius: 8px;
    transition: all 0.3s ease-in 0s;
}

    /* 上面的小圓深色反光處 */
    .cktoggle_square_circle::after { 
        content: "";
        position: absolute;
        top: 25px;
        left: -15px;
        width: 120px;
        height: 80px;
        background-color: #dedede;
        transform: rotate(-30deg);
    }

/* 當unchecked時，小圓顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label .cktoggle_square_circle {
    background-color: #f5f5f5;
    border-color: #b7b7b7;
}

/* 當unchecked時，外框顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label { 
    border-color: #8e8e8e;
}

/* label和背景的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_circle { 
    right: 0px;
}

/* ************************
   方形版本結束
************************ */

Radio button變化型 – 文字在上版

文字直接嵌入在操作鈕上，點擊時會切換ON和OFF不同文字。

顯示的結果會長這樣：

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_textTop">
    <input type="checkbox" class="cktoggle_textTop_checkbox" id="cktoggle_textTop_id" checked>

    <label class="cktoggle_textTop_label" for="cktoggle_textTop_id">
        <span class="cktoggle_textTop_inner"></span>
        <span class="cktoggle_textTop_circle"></span>
    </label>
</div>

CSS部分如下：

/* CSS */

/* ************************
    文字在上版本開始
************************ */

.cktoggle_textTop {
    position: absolute;
    width: 320px; /* 全按鈕寬度 */
    top: 410px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_textTop_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_textTop_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 50px;
}

/* 背景 */
.cktoggle_textTop_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_textTop_inner:before, .cktoggle_textTop_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 28px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_textTop_inner:before { 
        content: "";
        padding-left: 10px;
        background-color: #51c159;
        background-image: linear-gradient(to bottom,#51c159,#80dc7e);
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_textTop_inner:after { 
        content: "";
        padding-right: 10px;
        background-color: #5c9bbf;
        background-image: linear-gradient(to bottom,#5c9bbf,#8cc1ef);
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_textTop_circle { 
    display: block;
    overflow: hidden;
    width: 220px; /* 小圓寬度 */
    height: 22px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #f5f5f5;
    position: absolute;
    top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 95px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #c1c1c1; /* 小圓外框顏色 */
    border-radius: 50px;
    text-align: center;
    box-shadow: inset 0px 0px 15px 1px #afa7a7;
    transition: all 0.3s ease-in 0s;
}

    /* 直接在按鈕上增加文字 */
    .cktoggle_textTop_circle::before {
        content: "ON";
        padding-top: 3px;
        font-family: Trebuchet, Arial, sans-serif;
    }

    .cktoggle_textTop_circle::after {
        content: "OFF";
        padding-top: 3px;
        font-family: Trebuchet, Arial, sans-serif;
    }

/* 當切換的時候 上面的字隱藏/出現 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
    display: block;
}

.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
    display: none;
}

.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
    display: none;
}

.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
    display: block;
}

/* 當unchecked時，小圓顏色變換 */
.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle {
    background-color: #f5f5f5;
    border-color: #b7b7b7;
}

/* label和背景的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle { 
    right: 0px;
}

/* ************************
   文字在上版本結束
************************ */

總結

以上三種視覺上的變化型，讓你可以不再侷限於單一種按鈕樣式。

當然，最好是可以自己修改細節部分，讓你做出來的樣式可以最符合你的系統樣式噢！

希望透過以上的範例，運用純CSS教會大家開關型的Radio button美化與三種變化型囉！

延伸閱讀：
RWD教學-只要兩行就能輕鬆見效的實作經驗

然而較常使用到開關型的地方，應該是在手機版許多的使用者設定頁面會看到，類似電源開關的ON和OFF按鈕。

因此這裡整理了幾種樣式給大家參考，上集先給大家一般基本樣式的程式碼，如果有想知道更多相關的變化型，可以再參考下集的教學噢！

那我們開始用程式碼教大家，用純CSS就能做到開關型Radio button吧！

純CSS製作橫向開關型Radio button

先分析一下，Radio button的開關型，可以分成左右移動的開關和上下移動的開關。

從最常見的型態先看看，最後呈現的結果會長這樣：

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle">
    <input type="checkbox" class="cktoggle_checkbox" id="cktoggle_id2" checked>

    <label class="cktoggle_label" for="cktoggle_id2">
        <span class="cktoggle_inner"></span>
        <span class="cktoggle_circle"></span>
    </label>
</div>

接著是CSS程式碼：

/* CSS */

/* ************************
    原始版本開始
************************ */

.cktoggle {
    position: absolute;
    width: 120px; /* 全按鈕寬度 */
    top: 50px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #156812;
    border-radius: 25px;
}

/* 背景 */
.cktoggle_inner { 
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_inner:before, .cktoggle_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 40px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_inner:before { 
        content: "ON";
        padding-left: 10px;
        background-color: #10b736;
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_inner:after { 
        content: "OFF";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 9px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 85px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: right 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_circle { 
    right: 10px;
}

/* ************************
    原始版本結束
************************ */

純CSS製作縱向開關型Radio button

接下來，運用前一個橫向例子中相同的視覺樣式，只是從橫向變為縱向的程式寫法，最後呈現結果長這樣：

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_vertical">
    <input type="checkbox" class="cktoggle_vertical_checkbox" id="cktoggle_vertical_id" checked>

    <label class="cktoggle_vertical_label" for="cktoggle_vertical_id">
        <span class="cktoggle_vertical_inner"></span>
        <span class="cktoggle_vertical_circle"></span>
    </label>
</div>

接著是CSS部分：

/* CSS */

/* ************************
    垂直版本開始
************************ */


.cktoggle_vertical {
    position: absolute;
    width: 40px; /* 全按鈕寬度 */
    top: 520px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_vertical_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_vertical_label { 
    display: block;
    overflow: hidden;
    width: 40px;
    height: 100px;
    cursor: pointer;
    border: 2px solid #156812;
    border-radius: 25px;
}

/* 背景 */
.cktoggle_vertical_inner { 
    display: block;
    height: 200%;
    margin-top: -100px;
    transition: margin 0.3s ease-in 0s;
}

/* 背景 */
.cktoggle_vertical_inner:before, .cktoggle_vertical_inner:after { 

        display: block;
        float: left;
        width: 100%; /* before和after各佔100% 多的部分float left 所以OFF在下方 */
        height: 50%; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_vertical_inner:before { 
        content: "OFF";
        padding-right: 3px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

    /* OFF */
    .cktoggle_vertical_inner:after { 
        content: "ON";
        padding-left: 8px;
        padding-top: 60px;
        background-color: #10b736;
        color: #FFFFFF;
    }

/* 上面的小圓 */
.cktoggle_vertical_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 8px; /* unchecked時位置 */
    right: 5px; /* 小圓離右側距離 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: top 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_inner { 
    margin-top: 0;
}

/* label和上面小圓的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_circle { 
    top: 70px;
}

/* ************************
    垂直版本結束
************************ */

總結

如果是做系統的人，開關型按鈕可以讓使用者看到一整排需要操作的設定，比起單純看到兩顆Radio button來說，更直覺且質感提升不少，是個推薦的呈現方式噢！

把基本的橫向與縱向開關型按鈕看懂之後，我們再來進行下集的變化型。

變化型指的其實是樣式不同而已，相信如果橫向與縱向的程式能夠看懂並且懂得如何修改這些程式碼的話，我想下集的變化型肯定難不倒你的！

前往下集連結：
純CSS將Radio button美化與開關型整理(下)