前言： (若你時間有限，想直接知道怎麼做就跳到第二段 哈哈) 在執行網頁前端的工作中，有時候我們會遇到一些需求是需要透過 CDN 的方式才能夠完成內容傳遞的工作。 例如：非第三方平台伺服器能支援上傳的檔案格式(svg、webp、mp4 等等)。 這時候 Google Drive 可以「暫時」成為你的 CDN 之用。 為甚麼我會說是「暫時」呢？ 因為當網站資料越來越多且複雜時，這樣的檔案管理方式是不利於開發的。

撰寫 Media Query 時需注意順序，後方程式碼會取代前方程式碼進行套用。 範例： @media (max-width:500px) 照理說應該頻度寬度小於 500px 時，字體顏色需改變為藍色， 但瀏覽器卻顯示紅色，原因是 body 所執行的 css 順序為 @media query 之後， 所以會套用後方的程式碼效果。

CSS3 彈性盒子，又稱flexbox。 不用 floats 的彈性盒子模型會比塊狀模型（block model）易用。 彈性容器的邊緣也不會與內容的邊緣重疊。 在彈性盒子的世界，方向皆依附於主軸（main axis）與切軸（cross axis）。 ( 請參考下面的圖。) 如果 flex-direction 是 column，主軸就會充當垂直、而切軸則充當水平。

主要步驟： Installation｜創建專案＆安裝 Initializing & Testing｜初始化專案＆測試 Deploying a Static Website｜部署靜待網站 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ Installation｜創建專案＆安裝

什麼事 Open Graph？ 官方中文翻譯：開放社交關係圖標記 是由 Facebook 提出的設定，目標是讓網頁在社交媒體呈現時，能有較豐富的內容展示，如縮圖、標題、描述等。 Facebook 官方資料：給網站管理員的分享功能指南 如何設置於 HTML 之中? 將程式碼放置於 HTML 的 標籤之中

大致步驟為： 在你的 navigation 最外層放上標籤 <header> </header> 撰寫 Javascript 設定在特定條件下，取用指定的 css 撰寫 css 完成 <header> /* 裡面放 Ｎavigation 的程式碼 */

前情提要：「 最近在做公司專案，要製作導覽列(Navigation)，背景為有顏色的透明漸層。」 有一個重點概念一定要知道 CSS 漸變實際上是一個圖像值，而不是顏色值。 CSS gradient is actually an image value, not a color value as some might expect 所以必須使用 background-image 不能直接使用 background-color

導入雲端字體 @import @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); body{ font-family: 'Noto Sans TC', sans-serif; } Google Fonts 提供了許多免費字型可用於個人與商用 https://fonts.google.com/

使用 Google Chrome 點選瀏覽器右上角三個點點符號 書籤 > 書籤管理員 會新開一個書籤管理分頁 再看到右上角 > 點選三個點點符號 > 新增書籤

先講結論：可以，但有前提！ 頻果字體合理的使用授權範圍，利用在頻果裝置所製作的圖像、影像等，皆可用於個人或商業用途，但禁止用戶複製和公開分發 Font Book 的電子字體文件，提供其他非 Apple 硬件上使用。 特別注意：不可於網頁伺服器中內嵌字型檔，因為這樣等同讓非 Apple 硬件上可直接取用。   字體小知識：眾多 APPLE 字型中「頻方 繁體」是誰製作的？ 蘋方[1]（英語：PingFang[註 1]）是蘋果公司委託威鋒數位為蘋果五大作業系統（watchOS、tvOS、macOS、iOS、iPadOS）所開發的專有字型家族，屬於無襯線黑體

｜判斷層級問題 被覆蓋的層(欲置頂的層)的 position 是否也為 relative 或者 absolute。 若 1 成立，則判斷此層的 z-index 是否比誤覆蓋的 z-index 數值大。 若 2 成立，則判斷此層的父級元素是否比誤覆蓋層的 z-index 數值大。 若 3 成立，則判斷此層的父級元素是否比誤覆蓋層的父級層的 z-index 數值大。 ｜z-index 使用前提 必須使用到 position，設定你的元素位置，若沒有設定則元素會在網頁上呈現為一般的區塊，沒辦法重疊起來。

通常新增自定義色票，非常直觀且容易「如何新增自訂義色票庫」可以參考： https://youtu.be/i3nXJnbZUwQ 但若要刪除使用者定義的色票就非常不直覺... 問題摘要：目前要刪除「使用者定義」的色票檔案(.ai)，無法很直觀地找到該資料夾進行刪除。 有效的刪除方法：以下提供兩種方法 詳細檔案儲存路徑，直接刪除。

操作流程： Step 01：先至官網登入會員 至「網路中文」官網 → 登入帳號之後，點選「會員頭像符號」→ 下拉式選單，點選「域名管理」→ 再選擇「域名總覽」 → 可以查看所擁有的網域相關訊息。 ↓ Step 02：修改 NameSever(主機名稱) 至 Cloudflare

如以下步驟： 到你想要下載的頻道首頁 在該頻道任一處點選右鍵 → 檢視網頁原始碼 按 Ctrl＋Ｆ（搜尋關鍵字）：tvBanner 找到 width:2120 (找寬度最大的 url) 複製 url( 複製到這之前「,width」) 範例：

操作流程： Step 01：先確認網域的 DNS 是否運行正常(需前往網域託管平台查看) ↓ Step 02：至 firebase 進入欲連接網域的專案 ↓

｜網域名稱系統（英語：Domain Name System，縮寫：DNS） DNS，也就是網域名稱系統，它將人們可讀取的網域名稱 (例如，www.amazon.com) 轉換為機器可讀取的 IP 地址 (例如，192.0.2.44)。 ｜Cloudflare 託管 DNS :::info :bulb: 操作流程 - 參考影片：如何使用 CloudFlare 管理 DNS ::: 操作流程： 註冊一個 Cloudflare 帳戶 → 添加站點(Add a Site) → 輸入你的網域 → 選取方案 → Cloudflare 會自動帶入 DNS 的資料 → 更改名稱伺服器

Alert Message Box 提示訊息框，預期狀態如下圖： 問題描述： 當我在製作 Alert Message 時，想讓該元件固定於網頁底部，同時左右滿版適應到裝置大小，直覺先設定 width: 100% 然後使用 position:fixed 將此元件固定位置。 但當增加 padding 後，float:right 的按鈕"X"就會消失。   HTML 部分架構