🆕 https://mnya.tw/cc/word/1576.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 📄JavaScript】
現在不管是 Windows、macOS 還是 Android,系統都可以設定色彩主題成深色模式或淺色模式,瀏覽器也會因為系統設定值而獲得參數,這時候透過 JavaScript 就可以...
#偵測系統色彩主題 #系統色彩主題 #深色模式 #淺色模式 #深色 #淺色 #黑暗模式 #明亮模式 #HTML #JavaScript #JS #網站技術 #prefers_color_scheme #dark #light
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 📄JavaScript】
現在不管是 Windows、macOS 還是 Android,系統都可以設定色彩主題成深色模式或淺色模式,瀏覽器也會因為系統設定值而獲得參數,這時候透過 JavaScript 就可以...
#偵測系統色彩主題 #系統色彩主題 #深色模式 #淺色模式 #深色 #淺色 #黑暗模式 #明亮模式 #HTML #JavaScript #JS #網站技術 #prefers_color_scheme #dark #light
萌芽綜合天地
JavaScript:偵測系統深色模式/淺色模式 – 萌芽綜合天地
現在不管是 Windows、macOS 還是 Android,系統都可以設定色彩主題成深色模式或淺色模式,瀏覽器也會因為系統設定值而獲得參數,這時候透過 JavaScript 就可以抓取現在的模式,進而做到改變網頁內容/樣式。這在做網頁深色模式與淺色模式(或者說「黑暗模式」和「明亮模式」)上非常有幫助,使用者基本上不用自行切換,直接透過系統的偏好值顯示對於使用者來說最合適的色彩主題。
🆕 https://mnya.tw/cc/word/1702.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML】
<datalist> 是 HTML 原生的標籤,目的是用來建立一組資料清單,並與 <input> 輸入欄位做結合,到瀏覽器端顯示時,使用者只要點擊輸入欄位即會跳出下拉選單,可以在開發者定義好的...
#datalist #資料清單 #input #輸入欄位 #可自動補字 #自動補字 #下拉選單 #選單 #HTML #網站技術 #原生標籤
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML】
<datalist> 是 HTML 原生的標籤,目的是用來建立一組資料清單,並與 <input> 輸入欄位做結合,到瀏覽器端顯示時,使用者只要點擊輸入欄位即會跳出下拉選單,可以在開發者定義好的...
#datalist #資料清單 #input #輸入欄位 #可自動補字 #自動補字 #下拉選單 #選單 #HTML #網站技術 #原生標籤
萌芽綜合天地
HTML <datalist> 輸入欄位可自動補字之下拉選單 – 萌芽綜合天地
<datalist> 是 HTML 原生的標籤,目的是用來建立一組資料清單,並與 <input> 輸入欄位做結合,到瀏覽器端顯示時,使用者只要點擊輸入欄位即會跳出下拉選單,可以在開發者定義好的資料清單中做選擇,且在欄位內輸入與資料清單有關之文字,還能有自動補字或自動完成之效果,舉例來說,在做國家、縣市、地區等輸入時就可以用到。 1. 先建立 <input>,並在標籤內塞入 list 屬性並做命名。
🆕 https://mnya.tw/cc/word/1713.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML】
在 HTML 中,<button> 並沒辦法直接加上 href 屬性使按鈕作為連結,因此需要靠一些「手段」讓按鈕有像是 <a> 一樣的行為...
#button #將按鈕做成連結 #按鈕 #連結 #a #link #href #HTML #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML】
在 HTML 中,<button> 並沒辦法直接加上 href 屬性使按鈕作為連結,因此需要靠一些「手段」讓按鈕有像是 <a> 一樣的行為...
#button #將按鈕做成連結 #按鈕 #連結 #a #link #href #HTML #網站技術
萌芽綜合天地
HTML button 將按鈕做成連結 – 萌芽綜合天地
在 HTML 中,<button> 並沒辦法直接加上 href 屬性使按鈕作為連結,因此需要靠一些「手段」讓按鈕有像是 <a> 一樣的行為。 首先是方法一,利用一個 <form> 將 <input type="submit"> 包在裡面,而外頭的 <form> 還要給予一個 action 屬性以給予連結,原始碼如下: 再來是方法二,利用 JavaScript 來設定 ,可以做到類似連結的效果,
🆕 https://mnya.tw/cc/word/1716.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML】
學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的,而我們有時會需要在網頁中導引訪客連結至一個檔案,而該檔案有可能是 DOCX、PPTX 或 PDF 等...
#a #download屬性 #download #屬性 #讓連結可直接執行下載 #連結 #下載 #HTML #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML】
學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的,而我們有時會需要在網頁中導引訪客連結至一個檔案,而該檔案有可能是 DOCX、PPTX 或 PDF 等...
#a #download屬性 #download #屬性 #讓連結可直接執行下載 #連結 #下載 #HTML #網站技術
萌芽綜合天地
HTML <a> download 屬性讓連結可直接執行下載 – 萌芽綜合天地
學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的,而我們有時會需要在網頁中導引訪客連結至一個檔案,而該檔案有可能是 DOCX、PPTX 或 PDF 等,而某些檔案瀏覽器因為無法預覽會直接跳出下載,然而像是 PDF 這種可預覽的格式則會直接給訪客進入預覽,但有時候開發者可能更希望訪客是直接下載這些檔案的,因此就可以透過新增download 屬性讓連結可直接執行下載!
🆕 https://mnya.tw/cc/word/1720.html
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 📄HTML , 🎨CSS , 🟪Bootstrap】
近期 Bootstrap 穩定版已經開發到 5.1 了!不過很多人還是用較舊的版本在進行網頁的開發,而我自己在用 Bootstrap 3.4.1 做面板(Panel)時,就發現了其一個很棒的功能...
#Bootstrap_3_4_1 #多彩改良式可折疊面板 #多彩 #改良式 #可折疊面板 #可折疊 #面板 #Panel #HTML #CSS #Bootstrap #網站技術
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 📄HTML , 🎨CSS , 🟪Bootstrap】
近期 Bootstrap 穩定版已經開發到 5.1 了!不過很多人還是用較舊的版本在進行網頁的開發,而我自己在用 Bootstrap 3.4.1 做面板(Panel)時,就發現了其一個很棒的功能...
#Bootstrap_3_4_1 #多彩改良式可折疊面板 #多彩 #改良式 #可折疊面板 #可折疊 #面板 #Panel #HTML #CSS #Bootstrap #網站技術
萌芽綜合天地
Bootstrap 3.4.1:多彩改良式可折疊面板 – 萌芽綜合天地
近期 Bootstrap 穩定版已經開發到 5.1 了!不過很多人還是用較舊的版本在進行網頁的開發,而我自己在用 Bootstrap 3.4.1 做面板(Panel)時,就發現了其一個很棒的功能,就是可折疊面板(Collapsible Panel)!面板本身分為頭(Head)、身(Body)、尾(Footer),前者可以放標題(Title)、中者可以放內容(Content)、
🆕 https://mnya.tw/cc/word/1721.html
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 📄HTML , 🟪Bootstrap】
在前端領域,最近最常被提到的一定是 Bootstrap,它是一組用於網站和網路應用程式開發的開源前端框架,也是包含了 HTML、CSS 及 JavaScript(簡稱「JS」)的框架,提供...
#介紹 #入門 #Bootstrap_5 #Bootstrap_4 #Bootstrap_3 #差別 #入門模板 #HTML #Bootstrap #網站技術
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 📄HTML , 🟪Bootstrap】
在前端領域,最近最常被提到的一定是 Bootstrap,它是一組用於網站和網路應用程式開發的開源前端框架,也是包含了 HTML、CSS 及 JavaScript(簡稱「JS」)的框架,提供...
#介紹 #入門 #Bootstrap_5 #Bootstrap_4 #Bootstrap_3 #差別 #入門模板 #HTML #Bootstrap #網站技術
萌芽綜合天地
Bootstrap 介紹與入門,Bootstrap 5 跟 Bootstrap 3 & 4 的差別 – 萌芽綜合天地
在前端領域,最近最常被提到的一定是 Bootstrap,它是一組用於網站和網路應用程式開發的開源前端框架,也是包含了 HTML、CSS 及 JavaScript(簡稱「JS」)的框架,提供排版、字體、表單、按鈕、導航、選單及其他各種元件及 JavaScript 擴充套件,目的是讓動態網頁和 Web 應用的開發更加容易。目前最新版本為 5.1.0 (2021 年 8 月 4 日發布)。
🆕 https://mnya.tw/cc/word/1735.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕,特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕,輕鬆就能使用!基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕,特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕,輕鬆就能使用!基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術
萌芽綜合天地
自動隱藏且可直接使用的網頁回頂部按鈕 – 萌芽綜合天地
為了方便以後讓任何網站都能快速擁有回頂部按鈕,特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕,輕鬆就能使用!基本上只要在網頁 <head> 到 </head> 中先引入 jQuery 後即可直接使用。通常這種設計是為了方便讓使用者在看完網頁主要內容後,能快速回到最上面查看導覽列,若您的網站本身就設有固定於頂部的導覽列,可能就比較不需要這種設計。
🆕 https://mnya.tw/cc/word/1737.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS】
某些狀況之下,需要在網頁上做區塊輪播的效果,以達到一個畫面可以顯示更多資訊的目的,舉例來說:要顯示的資料過多、一次顯示在畫面上會很雜亂...
#純CSS區塊輪播效果 #純CSS #區塊輪播效果 #區塊輪播 #區塊 #輪播 #HTML #CSS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS】
某些狀況之下,需要在網頁上做區塊輪播的效果,以達到一個畫面可以顯示更多資訊的目的,舉例來說:要顯示的資料過多、一次顯示在畫面上會很雜亂...
#純CSS區塊輪播效果 #純CSS #區塊輪播效果 #區塊輪播 #區塊 #輪播 #HTML #CSS #網站技術
萌芽綜合天地
純 CSS 區塊輪播效果 – 萌芽綜合天地
某些狀況之下,需要在網頁上做區塊輪播的效果,以達到一個畫面可以顯示更多資訊的目的,舉例來說:要顯示的資料過多、一次顯示在畫面上會很雜亂。當然除此之外,還能用做圖片的幻燈片效果,重點是從頭到尾都不用碰到 JavaScript!純 CSS 搭配 HTML 就能做到囉!現在我就用一組簡易的示範來簡單描述原始碼: 這裡先用一個 <div class="slider-container"
🆕 https://mnya.tw/cc/word/1772.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網路應用 , 🖥網站技術 , 📄HTML】
試算表內容若可以輕鬆轉換為 HTML 表格(<table>)就可以輕鬆用網頁展示大量資料,為此站長特別 Google 了相關線上工具,最後...
#TABLEIZER #將試算表轉為HTML表格 #試算表 #HTML表格 #HTML_table #table #HTML #網站技術 #網路應用
【作者:萌芽站長;💻萌芽綜合天地;🌐網路應用 , 🖥網站技術 , 📄HTML】
試算表內容若可以輕鬆轉換為 HTML 表格(<table>)就可以輕鬆用網頁展示大量資料,為此站長特別 Google 了相關線上工具,最後...
#TABLEIZER #將試算表轉為HTML表格 #試算表 #HTML表格 #HTML_table #table #HTML #網站技術 #網路應用
萌芽綜合天地
TABLEIZER!:將試算表轉為 HTML 表格 – 萌芽綜合天地
試算表內容若可以輕鬆轉換為 HTML 表格(<table>)就可以輕鬆用網頁展示大量資料,為此站長特別 Google 了相關線上工具,最後找到了「TABLEIZER!」。只要將 Excel 或 Google 試算表的內容含表頭一起複製到網站的方框內,點下「Tableize It!」就可以生成 HTML 原始碼了!超快也超方便,立刻依照圖文教學嘗試看看吧! ▲ 進入「TABLEIZER!」,
🆕 https://mnya.tw/cc/word/1773.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 📄JavaScript , 📄jQuery】
jQuery Validate 是一個歷史悠久的 jQuery 套件,始於西元 2006 年 7 月,因此有許多網站都有使用到這個套件,它可以幫助開發者設計表單欄位資料驗證方法...
#jQuery_Validate #簡單 #驗證表單欄位資料格式 #驗證表單欄位 #驗證表單 #解決方案 #HTML #jQuery #JavaScript #JS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 📄JavaScript , 📄jQuery】
jQuery Validate 是一個歷史悠久的 jQuery 套件,始於西元 2006 年 7 月,因此有許多網站都有使用到這個套件,它可以幫助開發者設計表單欄位資料驗證方法...
#jQuery_Validate #簡單 #驗證表單欄位資料格式 #驗證表單欄位 #驗證表單 #解決方案 #HTML #jQuery #JavaScript #JS #網站技術
萌芽綜合天地
jQuery Validate:簡單驗證表單欄位資料格式的解決方案 – 萌芽綜合天地
jQuery Validate 是一個歷史悠久的 jQuery 套件,始於西元 2006 年 7 月,因此有許多網站都有使用到這個套件,它可以幫助開發者設計表單欄位資料驗證方法,也能直接使用其預設的驗證格式,如:必填、指定字元長度、E-mail 格式、URL 格式、日期格式、資料一致性、整數等,且能在使用者輸入後及提交時提供相關提示文字,提升使用者體驗,由於是元老級的套件,
🆕 https://mnya.tw/cc/word/1810.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS】
Master 是一套由台灣人開發的前端框架,倡導虛擬 CSS(Virtual CSS)的概念,將 CSS 語法都寫在 HTML 的 class 中,這樣開發者就不用每次都還要去想怎麼命名 class,或者...
#Master #虛擬CSS #Virtual_CSS #快速製作響應式GRID格線佈局 #響應式 #響應式網頁設計 #RWD #GRID格線佈局 #GRID #格線佈局 #HTML #CSS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS】
Master 是一套由台灣人開發的前端框架,倡導虛擬 CSS(Virtual CSS)的概念,將 CSS 語法都寫在 HTML 的 class 中,這樣開發者就不用每次都還要去想怎麼命名 class,或者...
#Master #虛擬CSS #Virtual_CSS #快速製作響應式GRID格線佈局 #響應式 #響應式網頁設計 #RWD #GRID格線佈局 #GRID #格線佈局 #HTML #CSS #網站技術
萌芽綜合天地
Master:快速製作響應式 GRID 格線佈局 – 萌芽綜合天地
Master 是一套由台灣人開發的前端框架,倡導虛擬 CSS(Virtual CSS)的概念,將 CSS 語法都寫在 HTML 的 class 中,這樣開發者就不用每次都還要去想怎麼命名 class,或者修改一個 class 卻導致多處版面破壞, 非常新穎的觀念!重點是它真的超輕量化,僅僅才 13KB,因此對使用者的流量負擔極小,而且還能將 CSS 屬性縮寫,如:padding → p、
🆕 https://mnya.tw/cc/word/1811.html
【作者:萌芽站長;💻萌芽綜合天地;🖥軟體應用 , 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️Visual Studio Code】
「Visual Studio Code」是由微軟(Microsoft)開發的開放原始碼程式編輯器。
「Master Styles Language Service」這個擴充功能可以幫助您使用 Master 框架開發網頁!因為這個框架採用較新穎的概念...
#Master_Styles_Language_Service #Visual_Studio_Code #VSCode #擴充功能 #Master框架 #Master #框架 #語法突顯 #完成提示 #延伸模組 #軟體應用 #網站技術 #HTML #CSS #IDE #開發工具
【作者:萌芽站長;💻萌芽綜合天地;🖥軟體應用 , 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️Visual Studio Code】
「Visual Studio Code」是由微軟(Microsoft)開發的開放原始碼程式編輯器。
「Master Styles Language Service」這個擴充功能可以幫助您使用 Master 框架開發網頁!因為這個框架採用較新穎的概念...
#Master_Styles_Language_Service #Visual_Studio_Code #VSCode #擴充功能 #Master框架 #Master #框架 #語法突顯 #完成提示 #延伸模組 #軟體應用 #網站技術 #HTML #CSS #IDE #開發工具
萌芽綜合天地
Master Styles Language Service(Visual Studio Code 擴充功能):Master 框架的語法突顯及完成提示 – 萌芽綜合天地
「Visual Studio Code」是由微軟(Microsoft)開發的開放原始碼程式編輯器。 「Master Styles Language Service」這個擴充功能可以幫助您使用 Master 框架開發網頁!因為這個框架採用較新穎的概念,也就是虛擬 CSS(Virtual CSS),會將 CSS 語法都寫在 HTML 的 class 中,