goTOP
網頁語言
April 15, 2021
點擊在新視窗中瀏覽此圖片
為了客戶要在就程式中加上某些功能,又不能動到inc模組的狀況下,改變CSS版型,就只能動用更新的CSS3設定來輔助顯示。如果沒有事前的定義,除了first-child, last-child 的方法,之外 nth-child(n)也是不錯的用法,但是要多注意上層的 Class 定義,才能完美定義出自己想要的CSS3樣式。

n可放入關鍵字:以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)

May 28, 2019
▼加在一般 html 方法,以下的「輸入內容」要同時輸入兩邊。
說明:使用onfocus 事件,檢查value的內容,如果是初始內容,就將內容清空
<input type="text" value="輸入內容" onfocus="javascript:if(this.value=='輸入內容')this.value='';">

▼DEMO try it:

  
  

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;
}


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