製作 TAB 頁籤選單最簡單的架構﹍純 CSS 實現技巧整理

最近有個需求是製作 TAB 頁籤選單,這功能很常見,理應沒什麼難度。然而客戶希望將來能自行編修、調整選單內容,並製作大量相關頁面,這對於不是熟悉前端程式碼、架構的人來說,要無腦編修 TAB 頁籤的 HTML/CSS 內容實在不太可能(因為這案子的選單內容區塊架構很複雜),而且我也...
繼續閱讀全文如何製作無圓點單選、多選按鈕(Input radio+checkbox)﹍純 CSS 技巧免 JS

HTML 表單提供了基本款 input 單選功能(圓點效果 type="radio"),以及多選功能(核取方塊 type="checkbox")。如果不求版面質感的話,瀏覽器預設效果已經算實用了。 但網頁設計如果不想跟別人家撞衫,那麼預...
繼續閱讀全文免外掛實現各種複雜 HTML5 表單驗證功能﹍實作範例(電話+生日+郵件+密碼確認)

前幾年介紹過一個不錯的表單驗證外掛「 Validator 」,最近為了想增進網頁效能,研究一下能否不靠外掛就實現這些複雜功能。 由於 HTML5 已經內建基本的表單驗證功能,效果、質感都滿有水準的,那麼剩下的就是一一想辦法解決實作上容易遇到的情境。 本篇會舉例各種常見的...
繼續閱讀全文如何讓新版 Blogger 按 Enter 能建立換行符號

Blogger 推出新版後台介面後,原本我一直是手動切回舊版來操作,以規避新版介面產生的各種問題。但是前幾天官方已消滅了舊版後台,也就是強制一律只能使用新版介面,這下真的沒輒只能硬著頭皮使用。 其實這段期間以來,新版很多問題都已反應給官方,有些是有改進,但官方沒有動作的部分想必...
繼續閱讀全文Blogger 使用錨點的操作方式(新版文章編輯器)

如果不熟悉 HTML 語法的話,要製作出錨點效果不太容易。Blogger 新版文章編輯器增加了不少功能,其中「錨點」算是非常實用的一個,就算不懂語法也能實現這個效果。 本篇會說明錨點的原理,以及如何在新版文章編輯器做出錨點。 (圖片出處: hippopx.com )
繼續閱讀全文Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決,輕鬆解析 HTML 與 XML

之前用 Google Apps Script(簡稱 GAS)製作網頁爬蟲程式,為了解析 HTML 與 XML 分別寫了兩篇心得: Google Apps Script 爬網頁資料,解析 HTML 及操作 DOM 的技巧 Google Apps Script 使用 XmlSe...
繼續閱讀全文Iframe 跨域傳值在 iOS 失效的解法﹍利用網址 + localStorage + cookie 並用

上一篇「 利用隱藏的 Iframe 跨域傳送訊息實作 」,很可惜在前端開發人員的大魔王(iOS)面前又失效了,在 iPhone 鬼打牆了很久才瞭解: iOS 禁止 localStorage 跨域傳值 iOS 的 Safari 設定中,預設關閉 cookie iOS 的 C...
繼續閱讀全文利用隱藏的 Iframe 跨域傳送訊息實作﹍postMessage

最近處理的案子需要在 A 網域登入後,同時在 B 網域一樣能保持登入的狀態。這就像登入 Google 一次後,旗下的各種服務例如 Gmail、Google Drive 等等,就算不同網域也不需要再重新登入。 實作的方式可以將登入資訊儲存在 HTML5 的 localStora...
繼續閱讀全文自訂 Input File 檔案上傳按鈕 CSS 最佳解法﹍實作範例

之前製作「 本站開放留言上傳圖片功能 」時,才發現 Input 上傳檔案按鈕還真不是普通地難搞。查了一下發現 Google 這些字串 "input type file css not working" 時會有不少案例,很是離奇。 好在最後還是找到完美的解決...
繼續閱讀全文前端開發神器 Emmet 快速上手教學整理,減少 HTML / CSS 輸入的麻煩﹍Sublime Text

網頁製作久了就會發現,手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題,「 Bootstrap 」可以縮短網頁版面設計的時間,那麼 HTML/CSS 的輸入,有沒有快速便利的工具呢? 「 Emmet 」(...
繼續閱讀全文H1 標籤使用圖片代替文字時, 該如何處理?

前陣子處理一個案子時,被詢問到「網站標題使用圖片的話,會不會比較不容易被搜尋到?」顯然這位讀者是具備 SEO 概念的,一般來說,網站標題會放在最重要的 H1 標籤,而且使用文字敘述。 由於 SEO 非我的專長,還是看看專家怎麼說比較保險。然而在尋找資料的過程中,發現用 ...
繼續閱讀全文讓行動版網頁能用手指縮放螢幕大小

這個「 Blogger 論壇貼文 」表示,"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站,發現的確連 WFU BLOG 也不能做到這件事。 其實在使用平板的時候,由於某些網頁字不夠大,常常需要用兩隻手指將螢幕放大。...
繼續閱讀全文線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤

前陣子也許 Blogger 在測試新功能,出現了這個「 Blogger 論壇 」貼文提到的異狀,在後台編輯文章的畫面,出現 "您的 HTML 不被接受,結尾標記沒有對應的開頭標記" 這樣的提示訊息。 其實 Blogger 編輯文章時,如果切換到 HTML ...
繼續閱讀全文Blogger 多層下拉選單實作

前陣子處理一個案子,需要在 Blogger 安裝多層下拉選單,說真的這不是一個輕鬆的任務,因此值得記錄一下過程,減少日後重新摸索的時間。 一般而言,如果像本站屬於主題集中、文章數幾百篇的規模,應該使用單層的下拉選單就足夠,太多層的下拉選單對於讀者而言,其實在尋找資訊時不是那麼...
繼續閱讀全文簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除

上一篇「 CSS 提示框懶人包實作 」說明了 CSS tooltip 原理,不過懶人包畢竟無法處理各種變數,留言提出了各種異常狀況,因此本篇仔細說明不同狀態下的解決方式。 << 請注意!本篇文章含會員限定內容 >>
繼續閱讀全文CSS3 漸層語法產生器﹍計數器背景實作(1)

使用 CSS 產生的漸層效果很棒,不過這些複雜的語法參數對一般使用者而言,跟看到天書是差不多的。在這個「 Blogger 中文社群討論串 」 +綜合口味 推薦了這個線上 CSS 漸層語法產生器「 Ultimate CSS Gradient Generator 」,且 +Mark...
繼續閱讀全文[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)
![[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YeX4Eeairatgevp-unCp1yz3LCZogfXhswqSndqyOYk13A484GtSgeTL6h7CQOs9GyOL05atYstsniitA1SE7beLoQFeKAG-SKKM_X8jvHVfH4k_ZCchmvloZuX2VeJWJJm5STEWupli/s1600/htm-css-js.jpg)
過去寫了不少篇屬於優化網站效能的基礎知識,如果都曾讀過、打好基礎後,那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例,說明如何整理程式碼、讓範本最佳化,也就是能夠減少體積、執行有效率,同時又易於維護。 不過動手之前,最好先確認對 html/js/css 有基本...
繼續閱讀全文活用 HTML/Javascript/CSS 格式化及壓縮工具﹍修改 Blogger 範本的觀念 (3)

隨著範本修改次數增加、範本檔越來越肥大,從最乾淨的狀態不到 100k 直到 2、300k 的情況都在所多有(如果備份時有注意檔案容量的話),是不是會覺得開啟範本的等待時間越來越久?也難怪網頁開啟時間越來越慢。 進入主題前先回顧一下系列文前兩篇,站長要如何不盲目地修改範本、脫離...
繼續閱讀全文[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作
![[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz7aQbHYgX9xEYlS3qL34N7c_1rCHDAwkwUcceZsJhtz6ZFHFUQ1vWMEUIwIiHRjj7VNQOq0eTMV9o-UQ7xW9_3RLqbZ0WGW8dD9oQ8YF5y1HuUv0Fc_hppPygKzNA9ZYoN5zWrXXABXRJ/s1600/go-top-on-floating-nav-bar.jpg)
上一篇「 快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計 」留言 #18 Jean Hsiung 詢問:「我對您的"↑TOP"鈕比較有興趣,這個有沒有教學?」。 為何 WFU 要將 "回到網頁上方" 的這顆 Go Top ...
繼續閱讀全文超連結 A 標籤及錨點, 你不知道的操作技巧(HTML語法)

(Pic from: elated.com ) 在所有 HTML 標籤之中,相信很多人第一個學會的就是超連結(A 標籤)語法吧!雖然超連結語法很簡單,不過其實也可以很複雜。若能了解 A 標籤的詳細操作方式與原理,可以在 SEO 上加分不少。 如果想更進一步精進網頁技巧,利用...
繼續閱讀全文