如果你想要自己架設網站，或是使用 WordPress 進行架站，就會需要購買雲端主機或虛擬主機，以品質和 CP 值來說，Cloudways 是經過多種主機商比較之後，最完美的主機首選！

( 延伸閱讀：部落格平台推薦：唯一推薦自由度最高的 WordPress.org )

而比較了網路上的折扣碼之後，我推薦由獺斯特釋出的免費折扣優惠碼【otta75】最頂級！

Cloudways 折扣碼 otta75

由於獺斯特是做基礎網頁設計和架設網站的教學老師，他與 Cloudways 談到【前 3 個月 75 折】的超高優惠，優惠碼是【otta75】，完全免費索取！

如何使用？

只要在 Cloudways 免費註冊頁，Promo Code 欄位輸入折扣優惠碼【otta75】，並且出現綠色勾勾，這樣就完成使用優惠碼的資格囉！

詳細使用方式也可以前往獺斯特官方釋出的文章：最新 Cloudways 優惠碼，頂級折扣碼免費索取！立即 1 鍵複製！

總結

大部分能談到的 Cloudways 優惠碼落在前 2 個月七折到九折之間，能夠談到前 3 個月 75 折真的是頂級折扣優惠碼。

對於想要自己架設網站、架設 WordPress 網站非常推薦 Cloudways 主機，立即使用最頂級的折扣碼【otta75】吧！

延伸閱讀：

• 部落格平台推薦：唯一推薦自由度最高的 WordPress.org
• 同時經營部落格和自媒體的小技巧
• 【課程推薦】零基礎網頁設計教學！帶你從入門到轉職

它雖然可以在瀏覽器上顯示你的網頁，但如果不想用F12模擬器模擬手機版，而是真正想要用手機來查看這個未上架的網頁時，該怎麼設定呢？

這篇就來告訴大家從安裝 Live Server 插件開始教學，最後會教大家在手機上也能預覽網頁的設定！

如果你已經知道如何安裝以及如何使用 Go Live 功能，只差不知道如何使用手機版預覽的設定，可以直接從目錄按下【 用手機預覽你的網頁該如何設定 】跳至設定教學的位置喔！

安裝 Live Server 插件

首先開啟VS Code，點選左側選單中四個方塊圖示的「延伸模組」按鈕，點下去後搜尋「 Live Server 」，並按下「安裝」。

安裝好之後，你就可以開啟你的網頁程式碼檔案，這邊以 HTML 為例。

再來就準備使用Go Live功能一鍵預覽囉！讓你不用另外安裝XAMPP或MAMP，就可以在瀏覽器上預覽你的網頁！

使用 Live Server 內建的 Go Live 功能預覽網頁

緊接著，我們把檔案存檔後，可以看到整個VS Code右下角，有一個Go Live的按鈕，就給他用力按下去！

這樣就直接自動跳出瀏覽器，並且完成網頁的預覽囉！

故障排除

故障狀況1：安裝 Live Server 插件後沒出現 Go Live 按鈕

如果你發現你的VS Code沒有Go Live按鈕，可能的狀況有兩種：

1. 可能是你剛安裝插件，所以建議把VS Code重開就可以了。
2. 如果你是早就安裝但突然有這個狀況，可能是你不是以資料夾的方式開啟，而是只有直接開啟檔案的關係。

想透過資料夾的方式開啟的話，可以到左側列表最上方的「檔案總管」圖示按鈕 > 「開啟資料夾」按鈕，並點選你檔案的整個資料夾。

選擇後再從下圖左側紅色框框的位置開啟檔案，右下角就成功出現Go Live囉！

故障狀況2：Go Live 按鈕按下去後，卻都跳之前寫的其他檔案頁面？

這個狀況是我在寫這篇的時候突然出現的問題，是熱騰騰的故障啊！！

這個原因跟檔案總管也很有關係，如果你之前在編輯A頁面，而且檔案總管是開啟A頁面的資料夾。

突然你想改一下不同資料夾的B頁面時，如果你不是從檔案總管開啟B頁面的資料夾，而是直接開啟B頁面後按下Go Live，那插件一樣會開啟的是A頁面噢！

用手機預覽你的網頁該如何設定

上面已經學會如何使用Live Server插件，並且成功在網頁上直接預覽你的網頁了。

想使用真正的手機來預覽網頁的話，有兩個要件：

1. 手機和電腦要連同一個Wifi
2. 到VS Code中的設定輸入一行程式碼

要輸入什麼程式碼呢？
首先點選上方選單的「檔案」 > 「喜好設定」 > 「設定」。

設定列表中，找到 Live Server 插件，並且找任一個「在settings.json內編輯」按鈕點下去，就能開啟設定的程式碼要撰寫的位置。

開啟後，打上以下程式碼：

"liveServer.settings.useWebExt": true

務必記得你在設定檔中，

每一個項目之間要有「,」逗號當作間隔噢！

存檔後，你就可以透過你的IP位置，用手機連上你的網頁囉！

我們來試試看吧！

實作用手機開啟測試網頁

我們確認過手機和電腦連的是同一個Wifi後，可以先開啟命令提示字元（CMD）來查找自己的IP位置是多少。

開啟命令提示字元後，直接打上 「ipconfig」 並按下Enter鍵。

上圖的IPv4就是你的IP位置了，因此只要到你的手機上打上192.168.XXX.XXX（每台電腦皆不同），後面接:5500（因為Live Server插件預設就是:5500）

也就是你在手機的網址列輸入：
192.168.XXX.XXX:5500
並按下Enter，你就可以順利在手機上預覽你的網頁囉！。

總結

之前我都使用F12手機模擬器來模擬，有時候還是會覺得沒有直接在手機上看來得準確，尤其是字體大小和CSS動態效果的呈現，還是要真的拿起手機來預覽比較有感覺！

這篇 Live Server 插件介紹，從安裝、故障排除到 VS Code 的設定，順利達成在手機上預覽網頁的目的，不用另外安裝模擬器的預覽方法最方便了！

會以 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放大並自訂樣式

不過有次主管則是希望我把最簡單、不會誤會的按鈕，改成圖示，例如「搜尋」按鈕用放大鏡；「刪除」就用垃圾桶圖示顯示。

這種依照目前絕大多數的使用習慣來說，已經幾乎不會理解錯誤了，就可以直接用圖示取代文字呦！

但像是新增、選擇、全選等，有時候圖示選得不夠精確，加上並排顯示時會不太清楚，這時候如果使用者因為怕按錯而產生疑惑，就很明顯表示這個圖示按鈕絕對是設計不良囉！

這篇就來教你如何將文字類型的按鈕，透過Font Awesome來改成圖示類型的按鈕吧！

按鈕基本樣式製作

這邊就以「搜尋」按鈕為例，我們先把文字類型按鈕完成吧！

HTML部分：

<!-- HTML -->

<div>這是原本按鈕樣式</div>
<div class="btnI1">
    <input type="button" value="搜尋" class="ctrlbutton">
</div>

CSS部分：

/* CSS */

/* 按鈕美化基本樣式調整 */
.ctrlbutton {
    display: inline-block;
    margin: 5px 3px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 2px 13px;
    font-size: 14px;
    line-height: 30px;
    min-height: 35px;
    border-radius: 2px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: #ffffff;
    background-color: rgb(148, 190, 214);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: 2px 2px 3px grey;
    border: none;
    padding-right: 11px;
}

/* 游標移動到按鈕上時的樣式變化 */
.ctrlbutton:hover {
    color: white;
    box-shadow: none;
    border: none;
    background-color: rgb(124, 170, 195);
}

以上程式碼完成樣式如下：

接下來我們將Font Awesome插入我們的網站，
並且使用它。

如何嵌入Font Awesome圖示

可以到Google瀏覽器直接搜尋，輸入「font awesome cdn」，第一個看到「Setup Webfont with CDN | Font Awesome」就是了。

補充：
cdn的意思就是只要用一行程式碼嵌入，你就可以直接使用網站上的內容了。

所以我們進入網頁後向下捲動，尋找到cdn區塊中有<link>標籤開頭的，就是我們要找出來複製放進我們程式碼的內容：

於是複製這行之後，回到我們HTML的<head>與</head>標籤之間貼上，貼上範例如下：

<!-- HTML -->
<!-- 紅色字體為修改的內容 -->

<head>
    <meta charset="utf-8" />
    <title>test</title>

    <!-- 在這裡貼上 -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <link rel="stylesheet" type="text/css" href="/category/professional-skill/web-design/feed/Style1.css" />
</head>

這樣就可以開始使用囉！

Font Awesome圖示實作步驟

接下來，我們前往Font Awesome找尋我們要的icon，Font Awesome網站連結：https://fontawesome.com/

進入網站後上方導覽列點選「Icons」頁籤：

這時候就可以看到好多現有的icons供你選擇，還可以直接搜尋想要的icon噢！

我們直接搜尋「搜尋」的關鍵字「search」，就會發現有很多放大鏡相關的圖示出現。

這邊小提醒，游標移到圖示上時，如果右上角有「PRO」字樣表示是要付費才能使用的呦！

因此這邊我們用第一個免費的圖示點進去，免費版也只有一種粗細，確定使用這個的話就按下「Start Using This Icon」按鈕：

彈出視窗後，這個<i>標籤就是我們要的了！

因此按下複製按鈕：

就可以回到我們的HTML程式碼，在想要加入圖示的地方貼上<i>標籤，同時要把<input>標籤的value屬性留空，才不會還有文字在噢：

<!-- HTML -->

<div>這是原本按鈕樣式</div>
<div class="btnI1">

    <!-- 貼上圖示的程式碼 -->
    <i class="fas fa-search"></i>

    <!-- 將value的「搜尋」兩個文字拿掉 -->
    <input type="button" value="" class="ctrlbutton">
</div>

這時候會暫時呈現這樣：

看起來雖然暫時是壞的，但這個步驟的重點是，那個放大鏡有成功顯示出來就完成icon的嵌入囉！

修正Font Awesome圖示與按鈕

接下來，因為放大鏡目前是與按鈕並排呈現，我們要將放大鏡放入按鈕中，並把按鈕寬度放大到適當的大小。

這時候要用上position:relative和position:absolute相對位置的屬性來呈現。

還不知道這兩個屬性怎麼使用的話，可以點選下方連結看我們另一篇的教學，先認識一下這兩個屬性呦！

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

於是最終的所有CSS如下，紅色字體為有修改的內容：

/*CSS*/
/* 紅色字體為本次修改內容 */

.ctrlbutton {
    display: inline-block;
    margin: 5px 3px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 2px 13px;
    font-size: 14px;
    line-height: 30px;
    min-height: 35px;
    border-radius: 2px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: #ffffff;
    background-color: rgb(148, 190, 214);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: 2px 2px 3px grey;
    border: none;
    padding-right: 11px;

    /* 新增按鈕寬度 */
    width: 60px;
}

/* 當圖示被游標覆蓋時，它同層的下一個標籤狀態改變 */
i:hover + .ctrlbutton, .ctrlbutton:hover {
    color: white;
    box-shadow: none;
    border: none;
    background-color: rgb(124, 170, 195);
}

/* 設外層為基準位置 */
.btnI1{
  position: relative;
}


/* 放大鏡設為相對位置 */
i.fa-search{
  position: absolute;
  top: 16px;
  left: 26px;
  color: white;
}


/* 游標移動到圖示時，游標改變 */
i.fa-search:hover{
  cursor: pointer;
}

完成樣式如下：

總結

以上就是整個Font Awesome的應用方式，以及如何將圖示放在按鈕上的教學。

Font Awesome相當好用，唯一的限制大概就是如果要用到大量的圖示，並且通通放在同一個系統，有時候發現付費的圖示比較好看的時候，就要考慮付費還是自己畫了。

如果是公司遇上有一些付費圖示想使用，但公司沒有美工能作圖或沒有多餘時間的時候，建議可以直接變成付費會員，不僅未來開發系統的運用上變得相當便利、提高一致性，同時也是以行動支持這些資訊應用平台的好方法呦！

• 純CSS製作HTML頁籤切換效果
• RWD教學-只要兩行就能輕鬆見效的實作經驗
• 純CSS將Radio button美化與開關型整理(上)
• 純CSS將Radio button美化與開關型整理(下)
• 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美化與開關型整理(下)

但其實實務上只需要用到CSS和HTML各一行，基本上可以同時適應電腦版和手機版的RWD網頁就能完成了。

不過不得不說，確實會一點CSS比較知道這兩行代表的意義以及實用性，但就算什麼都不懂，我也會舉例給你，相信經過這篇文章，未來你只要再去學習HTML和CSS，你就同時學會RWD了！

CSS的RWD做法

我們先看程式碼，這行要寫在CSS的檔案中：

@media screen and (max-device-width: 768px){
  /* CSS內容 */
}

這行的意思是，當系統偵測到裝置寬度低於768px時，就自動執行大括弧中的CSS內容。

於是通常會寫一種電腦版，配上一個RWD版本，如下：

/* 電腦版 */
body{
  background:red;
}

/* 行動裝置版 */
@media screen and (max-device-width: 768px){
  body{
    background:green;
  }
}

這樣一來，根據CSS相同項目設定會由後方設定覆蓋過前方設定的原則，當行動裝置寬度低於768px時，背景就會變成綠色的了。

歡迎大家透過F12網頁的開發人員工具進行測試！

F12網頁的開發人員工具

這裡簡單提一下F12開發人員工具，如下圖的截圖中，你在網頁按下F12之後會出現截圖中的畫面，上面那個區塊是HTML的部分；
下面那個區塊是當你點選上方HTML標籤後，該標籤的CSS設定。

接著，F12點選下圖紅色框起的按鈕，就可以看見你剛剛設定的手機版本樣式囉！

由於把網頁瀏覽器寬度直接縮放，跟裝置縮放是兩回事，因此若還想要達到網頁瀏覽器寬度縮放的效果，要把@media那行括號中的device拿掉，再根據你的測試抓適當的視窗寬度，範例如下：

/* 原本括弧中的內容是max-device-width */
@media screen and (max-width: 1000px){
 
  body{
    background:green;
  }
}

HTML的RWD做法

再來就是因為HTML要加入的內容，這可以避免你一個區塊一個區塊手動把文字內容放大，加入這行就可以讓裝置偵測你是網頁但用手機裝置顯示而自動調整：

<!-- 加在HTML的<head>標籤中 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=1">

實務上有時候畫面比較寬資料量大時，會設initial-scale=0.6和minimum-scale=0.6，當然這是依據需求所做的調整。

但基本上只要加入了這行，再也不用擔心網頁的文字放在手機會小到完全看不到的困境，對超級新手前端是非常大的解藥！！

(延伸閱讀：Radio button和Checkbox放大並自訂樣式)

想當年我差一點點就要全部手動修改字體了…
還好在剛開始改的時候就多思考了幾秒突然覺得不太對，這麼先進的技術怎麼可能手機版要一個一個改CSS，才讓我查到這行拯救我前端人生的程式碼(淚~

結論

學完這兩行對於RWD響應式設計重要的程式碼後，是不是覺得RWD網頁設計其實也沒這麼難呢？

雖然無論是HTML、CSS學習的過程還是充滿許多眉角，但要是能先透過這兩行程式碼帶你速成一個RWD網頁，我想必定能夠讓你在寫網頁的路上增加很大的成就感！

延伸閱讀：
純CSS將Radio button美化與開關型整理(上)