CSS 標籤 - Let's Write

學會如何結合 GitHub Copilot 的 Agent 模式與 Figma MCP Server，自動產出 HTML/CSS 切版，加速前端開發流程，適合工程師與設計師參考的實用範例教學。

本篇大綱：本篇要解決的問題。方法 1：Tailwind CLI、建立 tailwind.css 檔、建立 tailwind.config.js 檔、開發時的監聽、上線前的編譯 Building for production。方法 2：引用大神 JS 檔。

本篇大綱：本篇要解決的問題。selection 文字反白樣式。first-letter 每段的第一個字。marker li 「點」的樣式。target 被選擇的錨點、id。focus-within input 影響 form。:placeholder-shown。

本篇大綱：本篇要解決的問題。頁籤 Tab。手風琴 Collapse。本篇算是對 :target 選擇器的小練習，是真的可以不用寫 JavaScript 就做出頁籤、手風琴這二個功能。

本篇大綱：本篇要解決的問題。安裝 Tailwind CSS -none、minimal、full。postcss.config.js。Google 了一下後，在 npm 上發現有一個套件可以直接安裝，而且容易上手，就整理成這篇。

本篇大綱：為什麼要自己開發一個按鈕、按鈕樣式部份、按鈕功能部份、判斷使用者語系、在 Google Apps Script 上寫 API、cookies、發 Google Analytics 事件、埋程式碼HTML、CSS、JS、結論。

探索如何使用純 CSS 創建網頁預覽效果。本文提供一個簡單而有趣的方法，通過 width/padding 的 CSS 特性和 background-position 處理捲動效果，僅需幾行 CSS 代碼。適用於歷年回顧或頁面預覽區塊。

自從 Google 設計了 Material Desgin 後，表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇，在註冊的時候，就發現他們的表單就是用了一樣的效果，連 Netflix 都在用了，看來是個好設計，就決定自己來寫一個。

Tag:CSS