網頁語言
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.到原點踏步)

May 28, 2018
這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎,做下筆記。
▼電腦版介面
點擊在新視窗中瀏覽此圖片
▼手機版介面 (以ICON做區別)
點擊在新視窗中瀏覽此圖片
May 28, 2018
說明:在CSS 的Class名稱中,只要包含「test」便改變屬性設定
點擊在新視窗中瀏覽此圖片
中文範例:點這裡
CSS部分:

div[class*="test"]{
  background:rgba(255,0,0,1.00);
  color: #ffffff;
}


May 24, 2018
這個CSS主要是可以從畫面的某個X座標,移動到頂端時,便停留在畫面頂端,不再需要Javascript計算位置。
幫客戶製作網頁時,考慮好幾種界面來導入網頁,因為簡單,輕量化,不使用 Javascript ,覺得很棒;但沒有完全對應多數瀏覽器版本,於是就放棄這個方案,做個筆記,過幾年大家都升級電腦與系統了,這個寫法就通用了。

點擊在新視窗中瀏覽此圖片
中文參考網頁:smaple
January 8, 2018
正常來說 HTML裡面,如果使用 li 做 float 功能時,就會讓 li 失去高度,為了不讓 li 失去高度,以及在之後的元素不會錯亂,需要有對應的程式寫法,如下:
HTML 一般寫法
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>

就會變成這樣:(灰框:div, 藍框:ul, 紅框:li)點擊在新視窗中瀏覽此圖片
分頁: 1/13 第一頁 1 2 3 4 5 6 7 8 9 10 下頁 最後頁
[ 顯示模式: 摘要 | 清單 ]