鐵人檔案
即使現成 Slider / Carousel 套件已經非常多，但我們仍可以藉由重造輪子，研究其中的原理，把學過的前端知識都用上。這一顆會滑的輪子需要 CSS 屬性 Flex、Transform 大量運用，以及配合 JavaScript 的模組化設計，最後在第 30 天讓它成為可以讓人安裝的輪子 (NPM 套件)，讓我們來試試吧！
時光飛逝，又來到一年一度的鐵人賽，這是一個絕佳的機會和動機，來整理過去的知識和經驗，除了可以強化自己的記憶之外，分享出來也是一種回饋知識社群的方式。 前言 回顧...
由於 JavaScript Slider 套件通常會用在展示相片，最常見的的佈局為四個項目區塊，包裝在一個 HTML 的 <div> 標籤中，如下圖...
在前一篇文章提到，因為設定了一個 font-size: 0 屬性會讓下層的文字都無法顯示在網頁上，除非下一層的元素本身有設定文字大小，把這個文字大小為 0px...
剛開始的規劃，是設計一列中有四個項目區塊排列的基本佈局。 圖 a: Slider 基本佈局 既然在前文提到，<div> 元素中使用 display:...
這一篇稱為「Flex 屬性指南」，目標就是要讓沒全沒有基礎的初學者，也能很快看懂，如果有看不懂的地方，可以留言在下方一起討論，我再試著用更白話的例子搭配圖片讓大...
在 flexbox 的模型中，主軸預設是水平方向，由左往右，那麼交錯軸 (cross axis) 是什麼呢？即使沒接觸過 CSS 的新手，從這一系列的文章看到這...
Day 5 提到的主軸屬性 flex-direction、justily-content，Day 6的交錯軸屬性 align-items、align-conte...
今天的文章要來幫 Slider 加上「上一個」以及「下一個」按紐。在這之前，先回顧一下 Slider 的基本佈局。就如第二天的文章提到，Slider 套件通常會...
在昨天的範例中，我們完成了 Slider 的「上一個」以及「下一個」按紐，其中的三角型符號圖示是採用偽元素 (pseudo element) 的方式製作。 語法...
偽類 (pseudo class) 是一種特別的 CSS 語法，它只會在指定的條件下生效。例如最常見的滑鼠移到 HTML 元素上時讓文字變色、底色變色，這種產生...
