Category: Web Skill

正常的 Lightbox 展示 12

利用純 CSS3 做出自適應的 lightbox

因為工作需求,要做一個使用說明頁。但「使用說明」並非這個案子的主要需求,所以決定利用 Lightbox 取代多做一頁 HTML,但使用功能強大的 Lightbox plugin 有些大材小用,所以思考了一下,決定使用純 CSS3 寫一個簡單、又能自適應的 Lightbox。

4

display: table-cell 無法使用 margin/ padding 的解法

關於 display: table 的介紹與運用,有部落客已經有寫文章介紹過,我就不多贅述了。我這篇針對的族群,是已實際用過 display: table 的朋友,當你們在使用的時候,也許會碰到「間距調整」的問題,例如要在每一個 table-cell 裡頭設定 margin 等間距調整,卻發現修改無效。假設你碰過這種狀況,不妨參考一下我推薦的解法…

3

將 Google 搜尋框整合至 WordPress

WordPress 雖然是個非常強大的 CMS,但我覺得「搜尋」是他所有功能裡面最雞肋的。有的人會選擇使用外掛增強 WordPress 內建的搜尋功能,或是額外自己寫一些 function 補足,不過我們也可以把搜尋這件事情交給強大的 Google,透過 Google 搜尋我們的網站,比內建的方便很多喲。

12

動手更換 Facebook 的新版面樣式

Facebook 終於改版了!但體驗不太好,雖然塗鴉牆的圖片尺寸變大了,訊息的間距也因此變小。假設一個人每天要看的資訊流很大,或像我一樣是 FB 重度使用者一直用滾輪看消息的話,就會覺得很痛苦。所以花了一點時間微調了 Facebook 的版面。如果你的 Facebook 也改成新版了,不妨對照一下我改了哪些東西吧 :)

使用 CSS:not 與 data-index 即時搜尋頁面 3

使用 CSS:not 與 data-index 即時搜尋頁面

去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜尋資料,覺得非常的好用,原作者使用的是原生的 JavaScript,而我將它改成了 jQuery,想了解怎麼用 jQuery 寫的朋友可以參考我的範例 :)