程式設計

2022 六角學院 JS 直播班[心得分享]

今年參加 2022 六角學院 JS 直播班的心得分享和評價。我覺得課程內容非常紮實而且實用！講師也非常有耐心，講得很詳細易懂，推薦對於已經有一點網頁設計基礎、想要邁向前端工程師的人，這門課真的非常值得參加！

教你如何將文字類型的按鈕，透過 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更簡潔！