CSS
December 5, 2022
因為重新安裝系統，最近常常增加自己的部落格內容，以防自己忘了許多小細節。也包括了自己工作室的部落格記載著許多年下來的內容也十分多，需要做些CSS視覺修改，好分辨在眾多的標題與文章間的視覺修正，好讓閱讀者有較好的視覺引導
▼發現電腦版需要點修正（修改前，青色箭頭部分無 ▶）
▼手機版還算清楚，所以沒有動到手機版的視覺修正
▼使用chrome檢視這行程式碼
▼按F12後，找到這段程式碼，應該是之下的 h4
▼發現電腦版需要點修正（修改前，青色箭頭部分無 ▶）
▼手機版還算清楚，所以沒有動到手機版的視覺修正
▼使用chrome檢視這行程式碼
▼按F12後，找到這段程式碼，應該是之下的 h4
April 15, 2021
為了客戶要在就程式中加上某些功能，又不能動到inc模組的狀況下，改變CSS版型，就只能動用更新的CSS3設定來輔助顯示。如果沒有事前的定義，除了first-child, last-child 的方法，之外 nth-child（n）也是不錯的用法，但是要多注意上層的 Class 定義，才能完美定義出自己想要的CSS3樣式。
以table tr 元素為例：
odd：為奇數
nth-child(odd)
tr:nth-child(odd){background:#808080}
even：為偶數
tr:nth-child(odd){background:#808080}
n可放入數字：以 ul li 元素為例：
前方開始的用法：
:nth-child(n)
August 23, 2018
最近做一個案子，並非一般型態的網站，必須大量使用程式碼來控制圖像位置與顯示，其中之一就是在 a:hover 或是其他元素 :hover 之下，同時指定多重指定一個以上的位置同時顯示不同元素，在以前一定要靠 Javascript +其他方式來寫，現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示，可以在上層加上區塊元素（div）使用 position 來做文字元素（i or a or span）定位相對位置，應該就可以解決了，當然這裡只是簡單的範例。
範例參考：點這裡
範例參考：點這裡
July 25, 2018
跟工程師討論後，他想要使用JavaScript來呈現動畫效果，我也有另外一套方式，將在行進中的動畫改變成不同圖片的方式，來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置（碰撞與否），但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗，可愛吧？！
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
May 28, 2018
這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎，做下筆記。
▼電腦版介面
▼手機版介面 （以ICON做區別）
▼電腦版介面
▼手機版介面 （以ICON做區別）
May 28, 2018
說明：在CSS 的Class名稱中，只要包含「test」便改變屬性設定
中文範例：點這裡
CSS部分：
div[class*="test"]{
background:rgba(255,0,0,1.00);
color: #ffffff;
}
中文範例：點這裡
CSS部分：
div[class*="test"]{
background:rgba(255,0,0,1.00);
color: #ffffff;
}
