萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1576.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 📄JavaScript】
現在不管是 Windows、macOS 還是 Android，系統都可以設定色彩主題成深色模式或淺色模式，瀏覽器也會因為系統設定值而獲得參數，這時候透過 JavaScript 就可以...
#偵測系統色彩主題 #系統色彩主題 #深色模式 #淺色模式 #深色 #淺色 #黑暗模式 #明亮模式 #HTML #JavaScript #JS #網站技術 #prefers_color_scheme #dark #light

萌芽綜合天地

JavaScript：偵測系統深色模式/淺色模式 – 萌芽綜合天地

現在不管是 Windows、macOS 還是 Android，系統都可以設定色彩主題成深色模式或淺色模式，瀏覽器也會因為系統設定值而獲得參數，這時候透過 JavaScript 就可以抓取現在的模式，進而做到改變網頁內容／樣式。這在做網頁深色模式與淺色模式（或者說「黑暗模式」和「明亮模式」）上非常有幫助，使用者基本上不用自行切換，直接透過系統的偏好值顯示對於使用者來說最合適的色彩主題。

37 views05:09

👍 1 ❤️

Open Comments

👉 詳細圖文 🌐 網站技術 💻 萌芽綜合天地

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1595.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 🎨CSS】
一般來說如果網頁要使用文字的修飾線條，都會用到 CSS 的「text-decoration」屬性，不過這個傳統的屬性並沒辦法做太多動態的變化，因此這次教大家使用...
#CSS #text_decoration #background_image #動態下橫線 #動態底線 #動態 #下橫線 #底線 #網站技術

萌芽綜合天地

CSS background-image 動態下橫線（底線） – 萌芽綜合天地

一般來說如果網頁要使用文字的修飾線條，都會用到 CSS 的「text-decoration」屬性，不過這個傳統的屬性並沒辦法做太多動態的變化，因此這次教大家使用另一個 CSS 屬性「background-image」實際製作動態下橫線（底線），首先看看效果：基本上就是網頁連結 <a>，游標移上去後觸發 :hover 進而顯現出動態下橫線（底線）。首先，HTML 如下：接著是 CSS：

22 views07:21

👍 1 ❤️💬

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1596.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 🎨CSS】
以前在網頁上做背景毛玻璃非常麻煩，要特別在需要毛玻璃背景的元素上加偽元素 ::before，然後直接對偽元素加網頁背景影像本身 + filter: blur(5px);，數值可調整...
#CSS #backdrop_filter #原生背景毛玻璃 #原生毛玻璃背景 #原生 #背景毛玻璃 #毛玻璃背景 #背景 #毛玻璃 #網站技術

萌芽綜合天地

CSS backdrop-filter 原生背景毛玻璃 – 萌芽綜合天地

以前在網頁上做背景毛玻璃非常麻煩，要特別在需要毛玻璃背景的元素上加偽元素 ::before，然後直接對偽元素加網頁背景影像本身 + filter: blur(5px);，數值可調整，這樣就搞定啦！但現在隨著 CSS 的進步，可以直接在需要毛玻璃背景的元素上加 backdrop-filter 屬性，就能做出同樣的效果，省事非常多！但因為這個新屬性並不屬於任何正式的規範，因此瀏覽器支援的狀況還很差，

28 views09:08

👍 1 ❤️💬

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1705.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , ⚙️Node.js】
Node-RED 建構在 Node.js 之上，也就是說需要先行安裝好該環境，這款工具才能運作。早期由 IBM 所開發，後來在 2016 年交給 OpenJS 基金會維護及運作網站等...
#Node_RED #流程圖視覺化串接資料 #流程圖 #視覺化 #串接資料 #IoT開發工具 #物聯網開發工具 #IoT #物聯網 #開發工具 #網站技術 #Node_js

萌芽綜合天地

Node-RED：透過流程圖視覺化串接資料、強大的 IOT 開發工具 – 萌芽綜合天地

Node-RED 建構在 Node.js 之上，也就是說需要先行安裝好該環境，這款工具才能運作。早期由 IBM 所開發，後來在 2016 年交給 OpenJS 基金會維護及運作網站等，現今為一個開源專案。透過它，您可以在基於瀏覽器上的網頁介面來操作各種資料的串接，並且同時可以做運算、除錯，還能導出數據至儀表板、資料庫等。操作上透過拖拉左側需要的節點至中央流程區塊，接著使用線條把需要的節點串聯，

36 views16:12

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1715.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🖥伺服器 , 🐘PHP】
學習 PHP，一定要知道 php.ini 是做什麼的！這個設定檔其實就是 PHP 的初始設定，所以一切跟 PHP 有關的環境設定都在裏頭做修改，而每次的修改都必須重新啟動伺服器才會生效...
#尋找php_ini路徑 #php_ini路徑 #php_ini #路徑 #php_ini_development #php_ini_production #網站技術 #伺服器 #PHP

萌芽綜合天地

PHP：尋找 php.ini 路徑及 php.ini-development 與 php.ini-production 是什麼？ – 萌芽綜合天地

學習 PHP，一定要知道 php.ini 是做什麼的！這個設定檔其實就是 PHP 的初始設定，所以一切跟 PHP 有關的環境設定都在裏頭做修改，而每次的修改都必須重新啟動伺服器才會生效，如果您是用 Apache 伺服器就是要重新啟動它。而我們如何尋找 php.ini 的路徑呢？簡單！運用這個方法就可以做到！您可以簡單將以下的原始碼存成一個 .php 網頁檔案，再上傳到要偵測的伺服器中。 ▲…

28 views00:18

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1716.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML】
學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的，而我們有時會需要在網頁中導引訪客連結至一個檔案，而該檔案有可能是 DOCX、PPTX 或 PDF 等...
#a #download屬性 #download #屬性 #讓連結可直接執行下載 #連結 #下載 #HTML #網站技術

萌芽綜合天地

HTML <a> download 屬性讓連結可直接執行下載 – 萌芽綜合天地

學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的，而我們有時會需要在網頁中導引訪客連結至一個檔案，而該檔案有可能是 DOCX、PPTX 或 PDF 等，而某些檔案瀏覽器因為無法預覽會直接跳出下載，然而像是 PDF 這種可預覽的格式則會直接給訪客進入預覽，但有時候開發者可能更希望訪客是直接下載這些檔案的，因此就可以透過新增download 屬性讓連結可直接執行下載！

24 views05:14

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 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 #網站技術

萌芽綜合天地

Bootstrap 3.4.1：多彩改良式可折疊面板 – 萌芽綜合天地

近期 Bootstrap 穩定版已經開發到 5.1 了！不過很多人還是用較舊的版本在進行網頁的開發，而我自己在用 Bootstrap 3.4.1 做面板（Panel）時，就發現了其一個很棒的功能，就是可折疊面板（Collapsible Panel）！面板本身分為頭（Head）、身（Body）、尾（Footer），前者可以放標題（Title）、中者可以放內容（Content）、

37 views10:23

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1721.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄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 日發布）。

42 views11:12

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1723.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🔒資訊安全 , 🐘PHP】
在預設的 PHP 環境中，因為資安的因素，錯誤資訊是被隱藏的，如果網頁哪邊撰寫錯誤，可能會直接給出一個空白頁面...
#PHP #顯示錯誤資訊 #顯示 #錯誤資訊 #網站技術 #資訊安全 #PHP

萌芽綜合天地

PHP：顯示錯誤資訊 – 萌芽綜合天地

在預設的 PHP 環境中，因為資安的因素，錯誤資訊是被隱藏的，如果網頁哪邊撰寫錯誤，可能會直接給出一個空白頁面，因此在偵錯上就會比較麻煩，為了方便暫時進行開發作業，我們可以用簡單的兩種方式達成強制顯示錯誤資訊的效果。 php.ini 中的兩個設定值可能會造成錯誤資訊是隱藏的，這在伺服器上能保障資訊安全：其中一個設定值為 off，就無法顯示錯誤資訊囉！這邊建議在開發上直接用修改 PHP 或添加 .

35 views10:33

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1735.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕，特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕，輕鬆就能使用！基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術

萌芽綜合天地

自動隱藏且可直接使用的網頁回頂部按鈕 – 萌芽綜合天地

為了方便以後讓任何網站都能快速擁有回頂部按鈕，特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕，輕鬆就能使用！基本上只要在網頁 <head> 到 </head> 中先引入 jQuery 後即可直接使用。通常這種設計是為了方便讓使用者在看完網頁主要內容後，能快速回到最上面查看導覽列，若您的網站本身就設有固定於頂部的導覽列，可能就比較不需要這種設計。

31 views11:20

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1737.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS】
某些狀況之下，需要在網頁上做區塊輪播的效果，以達到一個畫面可以顯示更多資訊的目的，舉例來說：要顯示的資料過多、一次顯示在畫面上會很雜亂...
#純CSS區塊輪播效果 #純CSS #區塊輪播效果 #區塊輪播 #區塊 #輪播 #HTML #CSS #網站技術

萌芽綜合天地

純 CSS 區塊輪播效果 – 萌芽綜合天地

某些狀況之下，需要在網頁上做區塊輪播的效果，以達到一個畫面可以顯示更多資訊的目的，舉例來說：要顯示的資料過多、一次顯示在畫面上會很雜亂。當然除此之外，還能用做圖片的幻燈片效果，重點是從頭到尾都不用碰到 JavaScript！純 CSS 搭配 HTML 就能做到囉！現在我就用一組簡易的示範來簡單描述原始碼：這裡先用一個 <div class="slider-container"

24 views11:17

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1752.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , ⚙️Node.js , 🟥Node-RED】
雖然說 Node-RED 的 Dashboard 內建介面所提供的 tab 切換功能很方便，左上角點開「≡」就可以選擇要切換的 tab，但若可以...
#Dashboard #button #ui_control #切換tab #切換 #tab #網站技術 #Node_js #Node_RED

萌芽綜合天地

Node-RED：Dashboard 使用 button 和 ui control 切換 tab – 萌芽綜合天地

雖然說 Node-RED 的 Dashboard 內建介面所提供的 tab 切換功能很方便，左上角點開「≡」就可以選擇要切換的 tab，但若可以做一個首頁，上頭佈滿要連結的 tab 按鈕，一定會非常方便！因此這次要運用 Dashboard 內建的節點 button 和 ui control 來切換 tab！ ▲ 先拉兩個 button 與一個 ui control，請接在一起，然後編輯節點，

32 views10:56

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/1772.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網路應用 , 🖥網站技術 , 📄HTML】
試算表內容若可以輕鬆轉換為 HTML 表格（<table>）就可以輕鬆用網頁展示大量資料，為此站長特別 Google 了相關線上工具，最後...
#TABLEIZER #將試算表轉為HTML表格 #試算表 #HTML表格 #HTML_table #table #HTML #網站技術 #網路應用

萌芽綜合天地

TABLEIZER!：將試算表轉為 HTML 表格 – 萌芽綜合天地

試算表內容若可以輕鬆轉換為 HTML 表格（<table>）就可以輕鬆用網頁展示大量資料，為此站長特別 Google 了相關線上工具，最後找到了「TABLEIZER!」。只要將 Excel 或 Google 試算表的內容含表頭一起複製到網站的方框內，點下「Tableize It!」就可以生成 HTML 原始碼了！超快也超方便，立刻依照圖文教學嘗試看看吧！ ▲ 進入「TABLEIZER!」，

👍1

33 views10:34

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 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 #網站技術

萌芽綜合天地

Master：快速製作響應式 GRID 格線佈局 – 萌芽綜合天地

Master 是一套由台灣人開發的前端框架，倡導虛擬 CSS（Virtual CSS）的概念，將 CSS 語法都寫在 HTML 的 class 中，這樣開發者就不用每次都還要去想怎麼命名 class，或者修改一個 class 卻導致多處版面破壞，非常新穎的觀念！重點是它真的超輕量化，僅僅才 13KB，因此對使用者的流量負擔極小，而且還能將 CSS 屬性縮寫，如：padding → p、

👍1

40 views14:37

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 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 #開發工具

萌芽綜合天地

Master Styles Language Service（Visual Studio Code 擴充功能）：Master 框架的語法突顯及完成提示 – 萌芽綜合天地

「Visual Studio Code」是由微軟（Microsoft）開發的開放原始碼程式編輯器。「Master Styles Language Service」這個擴充功能可以幫助您使用 Master 框架開發網頁！因為這個框架採用較新穎的概念，也就是虛擬 CSS（Virtual CSS），會將 CSS 語法都寫在 HTML 的 class 中，

👍1

39 views16:25

萌芽系列網站 ‧ Mnya Series Website🌳

🆕 https://mnya.tw/cc/word/2013.html
#Blockade_Labs #輸入提詞 #提詞 #AI創造 #360環景 #環景 #虛擬世界 #網路應用 #人工智慧 #AI繪圖 #AI #繪圖

萌芽綜合天地

Blockade Labs：輸入提詞讓 AI 幫你創造 360° 環景虛擬世界！ – 萌芽綜合天地

Blockade Labs 由 Skybox Lab 打造，用意是打破技術和創造力之間的障礙，讓所有人可以用 AI 建構屬於自己的 360° 環景虛擬世界！實際測試平常拿來給 Stable Diffusion 生圖的提詞也適用於此，除了景物外、同樣能生成人物！非常強大，一定要自己玩一次看看！瀏覽器打開網頁，輸入提詞跟選擇風格就能生成了！目前完全無需註冊、免費使用！ 🔗 Blockade Labs：

👍1

203 viewsedited 14:19

萌芽系列網站 ‧ Mnya Series Website🌳

ℹ️ https://mnya.tw/about/log/
【公告】全站正式支援 HTTP/3 以提高網頁加載速度和效能
發布編號：527 - 發佈日期：2024-04-28

萌芽站長使用的反向代理工具 Nginx 在 1.26.0 穩定版終於加入了對 HTTP/3 協定的支援，加上本站使用的 OpenLiteSpeed 網頁伺服器本身也支援 HTTP/3 協定，這下萌芽系列網站全站終於完全支援 HTTP/3 協定了！HTTP/3 是基於 QUIC 的 HTTP 協議的最新版本。它是一個透過 QUIC 傳輸的 HTTP 協議，旨在提高網頁加載的速度和效能。HTTP/3 的主要特點包括多路徑和多路徑傳輸支援、低延遲和高吞吐量。支援 HTTP/3 意味著網站能夠以更高效的方式傳輸訊息，從而提升訪客的瀏覽體驗。QUIC（Quick UDP Internet Connections）是一種由 Google 開發的網路傳輸協議，它是基於 UDP（User Datagram Protocol）的，旨在提高網路連接的速度和安全性。QUIC 通常用於替代傳統的 TCP（Transmission Control Protocol）協議，它整合了傳輸層和應用層的功能，並支援多路徑和多路徑傳輸。QUIC 的支援意味著網站能夠提供更快速、更安全的連接體驗給訪客。「QUIC is supported」和「HTTP/3 is supported」代表了該網站正在採用最先進的網路技術，以提供更快速、更安全和更高效的服務給訪客！感謝大家的支持。

#公告 #全站 #正式支援 #支援 #HTTP3 #提高 #網頁加載 #速度 #效能 #QUIC

👍1

26 views08:44