CSS

【課程推薦】零基礎網頁設計教學！帶你從入門到轉職

網頁設計教學課程【零基礎轉職！網頁設計 HTML、CSS 快速入門】線上課程，分析 5 大推薦理由。由講師的職場經驗回推設計成這門課，零基礎友善的教學方式與內容，透過這門課，手把手帶你轉職工程師吧！

這篇要來教你用 VS Code 插件 Live Sass Compiler 來快速將 SCSS 轉換成 CSS 檔！讓我手把手帶你把環境設定和輸出路徑，用圖解的方式設定一遍吧！未來再也不怕主管或客戶突然想更換網頁顏色，使用 SASS 或 SCSS 預處理器，幫你完成高效率的修改吧！

什麼是 ::before 和::after？CSS的偽元素是一個可以用CSS「憑空創造」一個區塊出來，而且在HTML程式碼後台你並不會看到它存在，但在網頁F12開發人員工具時可以看到。希望經過這些最基本的說明與範例實作，帶大家學會CSS偽元素::before和::after！

CSS position 屬性可以讓你設定位置，最常用的包含以下四種：fixed、sticky、relative、absolute，本篇教學以relative和absolute的相對位置解析為主，並透過範例帶大家實作一次，更容易理解噢！

這篇先教大家純CSS能怎麼做到頁籤切換的效果吧。因為後來開始逐漸熟悉Javascript後，就會變成CSS搭配Javascript來完成頁籤切換，撰寫的程式碼也比較精簡好閱讀、好維護，CSS也能專注在美化功能就好。

看完了基本款的橫向與縱向美化型態，這裡加碼整理了三種不同樣式上的變化型，讓你做出來的樣式可以最符合你現在正在製作的系統樣式。也希望透過以上的範例及程式碼大公開，運用純CSS教會大家開關型的Radio button基本款與美化的三種變化型。

較常使用到開關型的地方，應該是在手機版許多的使用者設定頁面會看到，類似電源開關的ON和OFF按鈕。純CSS美化Radio button，讓使用者操作更直覺且質感提升不少！相信如果橫向與縱向的程式能夠看懂並且懂得如何修改這些程式碼的話，我想下集的變化型肯定難不倒你的！