[CSS:counter(line)]如何用 CSS 來顯示區塊裡的序列行數

有時候在瀏覽一些 Coding 的教學網站時,會發現很多的頁面,在顯示程式碼/原始碼的區塊裡,每一行的前面都有會顯示序列的行數,感覺很酷,  
於是常常有朋友會詢問說,這個行數的數字是怎麼寫上去的呢?  
是用外掛的 Javascript 來做的嗎?  
還是這是什麼特殊的網頁效果?  
其實在區塊裡加上逐行的行數,方法比大家想像中的要來的簡單的多,  
只要用 CSS 語法就可以完成這個效果了 ...full story ››

[RWD]iPhone X 以及 8, 8+ 等各代機種的螢幕尺寸解析度與CSS語法對照表

為了替客戶或是自己的網站設計一個RWD的行動版樣式,感覺有了每一款機種的尺寸,就好像在設計上就完成了一半那樣(其實還差的遠了喔)!  
所以乾脆就直接整理了最近的這幾代 iPhone 每一款的螢幕尺寸解析對照表,讓有需要的朋友們參考。  
畢竟在執行 RWD 的行動版設計或是打造一個 iPhone 上的 App,有了尺寸對照表示挺方便的,不是嗎 ^^  
我們一起來看看吧 ...full story ››

[HTML5]運用網頁上的電話超連結語法(tel:),讓大家點一下就直接撥打電話

在行動時代,絕大部分的流量,都來自行動裝置,若是在手機的網頁上,看到一組電話號碼,比較合理的作法,應該是點擊一下,然後就直接透過手機撥號。  
那要怎麼寫,才能讓網頁上的電話號碼,變成可以點擊撥號的超連結呢?  
寫法很簡單,只是連結額外加上 TEL: 這個結構語法。  
我們看一下電話號碼超連結標準語法 ...full story ››

[CSS3]如何用 CSS 來改變 Placeholder 這個屬性的文字顏色

前一篇文章中,  
我們提到了在 HTML5 的規範裡,提供了一個新屬性 Placeholder。  
這個屬性很方便,不過也有一些陷阱和限制,其中比較明顯的一項,就是一般瀏覽器在顯示這個 Placeholder 文字時,預設的顏色對比普遍都太低了,不是很容易閱讀。  
所以接著我們就來跟大家分享一下,如何用 CSS 來改變 Placeholder 的文字顏色 ...full story ››

[HTML5]文字輸入欄 Input 的新屬性:Placeholder 是什麼?怎麼用?以及他的黑暗面

HTML 5 的規範裡,對於 Input 文字輸入欄位有很多新的屬性,其中有一個新屬性非常好用,但也同時有很多陷阱,一旦用不好,反而會產生更糟的使用者體驗,這個新屬性就是:Placeholder。  
為什麼說他非常好用,但又有很多陷阱呢?  
今天我們就來跟大家聊一聊這個新屬性的用法和應該留意的幾個小點 ...full story ››

[htaccess] 2種禁止網站圖片被別人外連盜圖的方法,同時又不會檔掉 Google 圖片的搜尋

當你的網站上圖片、影片越豐富,那麼就越有可能被別人盜連,辛辛苦苦的替別人做白工。

 

什麼是盜連呢?  
就是說,總是有那樣一小群人,為了增加自己網站的內容,就四處抄襲,看哪裡有好文章,可以增加他們的流量,那偷文也就算了,最可惡的就是連網頁上的圖片路徑都不改,原封不動的複製過去,這樣就等於把我們的網站當成她們的圖床,不進偷圖,還偷流量。 ...full story ››

[RWD]如何使用 Mac 上的 Safari 開發者工具,偵錯或微調 iPhone 行動版的網頁

設計 RWD 響應式行動網站,在完成第一階段的設計後,免不了的要直接在手機上測試,看看有沒有任何問題,可是如果要偵錯或是微調,改一個小東西,就得來來回回的在桌面上改寫存檔,再用手機 Refresh 瀏覽器一次重新查看,沒改好,再來一次....讓整個工作過程都充滿了火氣 XD  
難道在行動版的網頁,就不能像桌面版的頁面一樣,可以直接用瀏覽器提供的『開發者工具』,立即同步的來 Debug嗎? ...full story ››

[CSS3]如何重新定義 HTML 中換行標籤 BR 的樣式或是直接把BR的行距高度移除

如果開啟任何一篇網頁的原始碼,一定也會發現,原始碼中出現最多的標籤,絕對也是 <br />。  
一般來說,連續的換行標籤,在瀏覽器上是看不出差異,就跟打一個 BR 是一樣的,可是其他的情況,就會產生額外的行距、高度或空白區間,在樣式上就很難處理。  
有什麼方法可以去掉這樣的額外高度嗎?就是如何讓 BR 變成一個沒有實際作用的標籤呢? ...full story ››