以下分享幾種常見修改HTML標籤內容的方式，依照不同需求，我把自己會的修改方式分成兩大類，分別是針對標籤修改內部文字和在標籤內插入子標籤兩大類。 假設我們現在的 HTML 標籤像下面這樣 : 1<div class="container"></div> 如果今天想用 JavaScript 修改標籤內容，我們可以怎麼做呢? 1. 想修改文字內容 適合
material from: freeCodeCamp、CSS Tools: Reset CSS Chapter Content Catalog Chapter Content Chapter1. Introduction、Practice: Image Gallery Chapter2. flex-direction Chapter3. justify-content、al
material from: freeCodeCamp、CSS Tools: Reset CSS Final Summary 現在寫網頁時，對於使用者體驗這塊非常注重。以電商網站為例，顧客在網頁上停留的越久，對於店家商品的銷售越有利，所以要怎麼讓使用者獲得比較好的網頁瀏覽體驗呢? 其中一種比較簡單的方式就是 RWD (Responsive Web Design) 也就是互動式網頁設計，讓網頁能適應
material from: freeCodeCamp、CSS Tools: Reset CSS Use the flex Shorthand Property 前面我們依序介紹了 flex items 的相關設定，即 flex-basis、flex-shrink、flex-grow，那有沒有簡寫這些設定的方式呢? 有的，我們可以在 flex items 的 CSS 設定中，直接透過 flex 一
material from: freeCodeCamp、CSS Tools: Reset CSS Use the flex-grow Property to Expand Items 之前我們在 flex items 上設定 flex-shrink 指定視窗縮小時，flex items 各自要縮小的比例，那我們要如何指定視窗放大時，flex items 各自的放大比例呢? 答案是可以在 flex
material from: freeCodeCamp、CSS Tools: Reset CSS Use the flex-wrap Property to Wrap a Row or Column CSS 的 flexbox 有一個特性會將 flex container 拆分成數個 rows 或 columns。 在預設情況下，flex container 會將所有的 flex items 都放
material from: freeCodeCamp、CSS Tools: Reset CSS Align Elements Using the justify-content Property 透過新增display:flex;這個屬性設定到元素上，該元素就會變成一個有彈性的容器(flex container)。 在前1章，我們可以進一步設定flex-direction，調整容器內部子元素的擺
material from: freeCodeCamp、CSS Tools: Reset CSS Use the flex-direction Property to Make a Row & Column 透過新增display:flex;這個屬性設定到元素上，該元素就會變成一個有彈性的容器(flex container)。 接下來可以進一步設定flex-direction，調整容器內部
material from: freeCodeCamp、CSS Tools: Reset CSS Use display: flex to Position Two Boxes 這邊算是 flex box 的初入門，display:flex 宣告父容器要用 flex box 的形式放置網頁元素。 因為下面設定2個box各佔50%寬度的關係而且沒有多寫flex: wrap;，所以在縮放視窗時，沒辦法