標籤:CSS
網頁開發
何謂「靜態網頁」與「動態網頁」?「偽靜態網頁」又是什麼?
靜態網頁指單純由 HTML、CSS 及 JavaScript 構成的網頁,所有內容都位於檔案中,不會根據使用者輸入或其他條件改變網頁內容。動態網頁是由後端程式語言 (例如:PHP、Python) 根據使用者輸入或其他條件 (例如:網址參數) 動態生成網頁內容。偽靜態網頁本質上為動態網頁,但改善 SEO 不友善問題。
網頁開發
精選 26 個超吸睛的 CSS 按鈕特效
CSS 按鈕設計是網站設計中重要的元素之一,設計出吸引人的按鈕能增加使用者互動與體驗,提升網站的訪問量。本文整理了一些網路上我覺得不錯的 CSS 按鈕特效,並且這些特效完全不會用到 JavaScript,希望能為您的網站設計帶來一些靈感和啟示。本文提供的程式碼我有經過一些調整,但我會附上原始網址供您參考。
網頁開發
Parallax Scrolling 網頁視差滾動製作方法
Parallax Scrolling 是指當您在滾動網頁時,讓特定元素以不同的速度移動,創造出一種視覺上的效果,稱為視差滾動。這種技術能讓您的網站看起來更豐富、更時尚感、更具沉浸感,使用視差滾動製作的網頁,您很難不被它吸引。視差滾動網頁製作的困難度非常高,幾乎可以直接另開專案處理,而本文將介紹兩種相對簡單很多的方法,讓您的網站可以輕鬆使用。
網頁開發
Scrollspy 滾動監控,讓網頁根據捲軸位置自動更新選單
這次網站改版,我想在文章右邊加入目錄,並且讓目錄可以根據卷軸位置自動更新顯示,這種功能稱為滾動監聽 (Scrollspy)。Scrollspy 技術很早以前就有了,算不上什麼新技術,所以我本來打算直接使用 Bootstrap 內建的 Scrollspy 製作。在製作過程中,我一直遇到觸發更新事件的捲軸位置不正確的問題。因此,我花時間研究了一下 Scrollspy 原理,並決定自己開發此功能,本文將分享我的製作思路,提供給大家參考。
網頁開發
適用於 VS Code 及 Sublime Text 的 HTML/JavaScript/CSS 壓縮套件
壓縮程式碼是指在維持同樣功能的狀況下,儘可能減少程式碼數量以減小檔案大小,並加快網頁載入速度。不論是 HTML、CSS 或 JavaScript,都支援壓縮功能。當程式碼壓縮過後,所有無關的註解、空格及換行符號都已經被刪除,您幾乎無法用肉眼閱讀壓縮後的程式碼,因此您需要保留原始的程式檔案以供未來修改。通常我們會在壓縮後的檔名加上 min,例如原始檔名為 app.js,壓縮後的檔名為 app.min.js。
網頁開發
實作網頁深色模式及淺色模式的切換
深色模式在過去幾年變得非常流行,它是一種高對比度的顯示模式,能夠減少眼睛疲勞並降低耗電量。傳統的亮色界面,在低光環境下使用電子設備時,容易對眼睛造成不適。深色模式採用較暗的背景和較亮的文字和元素,減輕對眼睛的負擔,降低眼睛疲勞的風險。在本文中,我將向您展示如何讓您的網頁根據作業系統的設定,自動選擇配色方案,並且也會介紹手動切換配色方案的方法。
網頁開發
使用 CSS 與 SVG 製作波浪動畫
波浪動畫的特效一般提升網頁的美觀,這些特效一般都不需要與使用者進行互動,因此盡量不要使用到 JavaScript 為佳。簡單的特效盡量使用 CSS 製作,複雜的特效可能就不得不依賴 JavaScript 了。本文參考網路上找到的資料,展示兩種實現網頁波浪動畫的方法,並且這兩種方式皆未使用到 JavaScript。