網頁語言
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)點擊在新視窗中瀏覽此圖片
January 4, 2018
當我製作手機版網頁時,習慣性的沿用PC版的CSS定義
發現一個跟 padding 完全無關的問題(BUG)

點擊在新視窗中瀏覽此圖片
HTML for mobile
<a href="index.php">首頁 home</a><a href="Category.php">商品清單 Category</a><span>某某商品名稱</span>

分頁: 1/13 第一頁 1 2 3 4 5 6 7 8 9 10 下頁 最後頁
[ 顯示模式: 摘要 | 清單 ]