https://mocationer.com/tags/%E7%B6%B2%E9%A0%81%E5%B0%8F%E6%8A%80%E5%B7%A7/ Recent content in 網頁小技巧 on 薯薯推薦 https://mocationer.com/images/og-default.png https://mocationer.com/images/og-default.png Hugo zh-tw Sun, 16 Jan 2022 15:26:26 +0800 https://mocationer.com/btn-with-font-awesome/ Mon, 01 Mar 2021 08:30:00 +0800 https://mocationer.com/btn-with-font-awesome/ 教你如何將文字類型的按鈕，透過 Font Awesome 來改成圖示類型的按鈕吧！可以透過Google瀏覽器直接搜尋輸入font awesome cdn，用程式碼的方式嵌入圖示，就能直接使用 Font Awesome 的圖示囉！ https://mocationer.com/css-position-relative-absolute/ Mon, 22 Feb 2021 08:30:00 +0800 https://mocationer.com/css-position-relative-absolute/ CSS 的 position 屬性可以讓你設定位置，最常用的包含以下四種：fixed、sticky、relative、absolute，本篇教學以relative和absolute的相對位置解析為主，並透過範例帶大家實作一次，更容易理解噢！ https://mocationer.com/tab-css-change/ Mon, 15 Feb 2021 08:30:00 +0800 https://mocationer.com/tab-css-change/ 這篇先教大家純CSS能怎麼做到 頁籤切換 的效果吧。因為後來開始逐漸熟悉Javascript後，就會變成CSS搭配Javascript來完成頁籤切換，撰寫的程式碼也比較精簡好閱讀、好維護，CSS也能專注在美化功能就好。 https://mocationer.com/radio-button-css-change-2/ Tue, 26 Jan 2021 09:00:00 +0800 https://mocationer.com/radio-button-css-change-2/ 看完了基本款的橫向與縱向美化型態，這裡加碼整理了三種不同樣式上的變化型，讓你做出來的樣式可以最符合你現在正在製作的系統樣式。也希望透過以上的範例及程式碼大公開，運用純CSS教會大家開關型的 Radio button 基本款與美化的三種變化型。 https://mocationer.com/radio-button-css-change-1/ Mon, 25 Jan 2021 15:31:20 +0800 https://mocationer.com/radio-button-css-change-1/ 較常使用到開關型的地方，應該是在手機版許多的使用者設定頁面會看到，類似電源開關的ON和OFF按鈕。純CSS美化 Radio button ，讓使用者操作更直覺且質感提升不少！相信如果橫向與縱向的程式能夠看懂並且懂得如何修改這些程式碼的話，我想下集的變化型肯定難不倒你的！ https://mocationer.com/rwd-two-line/ Mon, 18 Jan 2021 22:49:06 +0800 https://mocationer.com/rwd-two-line/ 實務上只需要用到CSS和HTML各一行，基本上可以同時適應電腦版和手機版的RWD網頁就能完成了。雖然無論是HTML、CSS學習的過程還是充滿許多眉角，但要是能先透過這兩行程式碼帶你速成一個RWD網頁，我想必定能夠讓你在寫網頁的路上增加很大的成就感！ https://mocationer.com/radio-button-and-checkbox-customize/ Thu, 14 Jan 2021 19:24:49 +0800 https://mocationer.com/radio-button-and-checkbox-customize/ Radio button和Checkbox按鈕透過CSS的方式修改，這裡就用程式碼直接讓你學會，不只讓你能將按鈕變大顆，也能教你把按鈕透過CSS自訂成想要的樣式噢！如果還想要自訂樣式擁有更多元化的呈現，我們使用的是::before 和 ::after的方式來呈現，讓HTML更簡潔！