Flex 強大排版術：flex-direction 如何應用？主軸、交錯軸附圖解說！

網頁排版技術非常多，包含 float、inline-block、Flex 或是 grid 等等，其中 Flex 是現今滿常見的排版技術，使用這個技術，也能夠較為輕鬆地達到所謂的水平垂直置中，那要如何使用這項技術呢？這篇文章就來說明 Flex 其中一個屬性 flex-direction。

2021-07-22

CSS

CSS Flex flex-direction

什麼是 background？跟 img 的差別？image、repeat、color 以及 position 等屬性又該如何設定？

CSS 除了透過 img 顯示圖片外，還有 background 可以用於顯示背景圖片，當然它並不只有背景圖片的技巧，如果要設定背景顏色也是可以的，今天就來介紹一下 background 相關應用。

2021-07-18

CSS

CSS background

使用 PHP 解 Leetcode：1431. Kids With the Greatest Number of Candies 擁有最多糖果的孩子

題目資訊題目網址：1431. Kids With the Greatest Number of Candies難易度：Easy 簡單通過率：88.1%（截至發文時間）

2021-07-12

PHP Leetcode

Leetcode php 擁有最多糖果的孩子

網頁版型控制不能不知道的事！區塊與行內元素、盒模型與容器

繼上一篇網頁樣式跟想像中不一樣，你 CSS Reset 了嗎？說明了 CSS Reset 造成網頁排版不如預期的因素，其實還有許多因素都會影響網頁上的排版，今天就來了解這些因素，來掌握版型控制技巧！

2021-07-10

CSS

網頁排版區塊元素行內元素盒模型 box-modelㄋ padding margin 行距容器滿版式設計

網頁樣式跟想像中不一樣，你 CSS Reset 了嗎？

當透過 CSS 切完網頁版面後，發現網頁跟自己想像或是設計稿上顯示的有落差，是發生了什麼事情？ CSS Reset 出現與存在意義之所以會有 CSS Reset 出現，是因為早期瀏覽器在渲染 HTML 的 CSS 樣式標準不一，導致同一段語法在不同家瀏覽器所渲染出的結果不一樣，為了統一各家瀏覽器的預設渲染樣式，因此出了 CSS Reset 讓預設網頁樣式在各家瀏覽器是一樣的狀態。

2021-07-08

CSS

CSS CSS Reset

想要提升寫 code 效率，一定要認識的寫網頁好幫手 - Emmet

想要提升寫 code 效率，一定要認識的寫網頁好幫手 - Emmet

Emmet 是個支援多個編輯器的擴充程式，幫助我們在寫程式時，只要記相對應的縮寫，就能完整將關鍵字打出來。優點提升開發速度減少打錯字造成後續 debug 的時間

2021-07-06

工具推薦

HTML CSS emmet VS code

Joomla! 表單元件 JSN UniForm 利用 HTML 語法加上圖片

Joomla! 表單元件 JSN UniForm 利用 HTML 語法加上圖片

Joomla! 的表單元件 JSN UniForm 預設提供的表單功能，在 radioButton 內沒有提供圖片選項（不過是免費版的部分，且是 2020 年時改的，不知道之後有沒有改？）不過後來發現，只要透過簡單的 HTML 語法就能夠達成這個效果了！

2021-07-04

Joomla

Joomla JSN UniForm