Tagged: 教學

muki-webcourse 29

HTML + CSS + jQuery 前端組合課程招生與介紹(2015/4/21 開課)

近幾年也有很多前端相關課程,但大多有某個特定主題,不太會從基礎開始教起。也因此許多人想要轉攻網站設計,幾乎都只能靠自修啃書,或者是從網路上找資料。因此我想要幫助這些朋友,讓他們有個學習的管道可以從頭開始練習,不用東拼西湊的找網路資料,就能奠定良好的基礎。

正常的 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 搜尋我們的網站,比內建的方便很多喲。

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

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

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