網頁設計

Live Server 插件如何在手機上也能預覽你的網頁？

在 VS Code 當中，使用 Live Server 插件時，你可以透過右下角按鈕的 Go Live 按鍵，來達到完全不用另架伺服器即可預覽網頁的功能。這篇介紹從安裝、故障排除到VS Code的設定，順利達成在手機上預覽網頁的目的，不用另外安裝模擬器的預覽方法最方便了！

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

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

教你如何將文字類型的按鈕，透過 Font Awesome 來改成圖示類型的按鈕吧！可以透過Google瀏覽器直接搜尋輸入font awesome cdn，用程式碼的方式嵌入圖示，就能直接使用 Font Awesome 的圖示囉！

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

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

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

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

實務上只需要用到CSS和HTML各一行，基本上可以同時適應電腦版和手機版的RWD網頁就能完成了。雖然無論是HTML、CSS學習的過程還是充滿許多眉角，但要是能先透過這兩行程式碼帶你速成一個RWD網頁，我想必定能夠讓你在寫網頁的路上增加很大的成就感！

Radio button和Checkbox按鈕透過CSS的方式修改，這裡就用程式碼直接讓你學會，不只讓你能將按鈕變大顆，也能教你把按鈕透過CSS自訂成想要的樣式噢！如果還想要自訂樣式擁有更多元化的呈現，我們使用的是::before 和 ::after的方式來呈現，讓HTML更簡潔！