HTML & CSS

網頁設計小眉角：一些少見卻好用的 HTML & CSS

HTML & CSS、網站三兩事 / 作者: / 2022 年 3 月 9 日

input 的欄位預設會記錄輸入的值，以方便使用者在重複輸入的時候可以透過下拉直接點選，如帳號、電子信箱等等。但有時我們十分確定使用者不會在該欄位輸入兩次一模一樣的數值，或是不希望其他使用者發現我們輸入什麼內容時，會希望關掉 input 的紀錄功能，這時，你可以在 input 加入 autocomplete="off" 的屬性，這個屬性預設是 on 開啟，也就是會紀錄 input 的輸入內容。但，當你改成 off 後，下次你在該欄位輸入資訊時，瀏覽器就不會紀錄任何內容。

資源不夠時別用 WordPress 架設購物車！特別是涉及到金流時，你需要想得更仔細些。

HTML & CSS、網站三兩事 / 作者: / 2022 年 3 月 26 日

在許多討論 Wordpress 的論壇或社群很容易將 Wordpress 神格化，彷彿萬物皆可用 Wordpress 來解決，畢竟透過外掛，理論上它的確可以完成很多工作。但有趣的地方在於可以順利工作與可以穩定運行兩者間存在巨大的技術鴻溝，當你有足夠的背景知識去處理 Wordpress 衍伸出來的問題時，Wordpress 就會是一個好工具，反之，它會再出現問題的時候變成你的噩夢。

網頁設計師必學的五個 CSS 動畫庫

HTML & CSS / 作者: / 2020 年 10 月 24 日

俗話說，工欲善其事必先利其器，對現在的網頁設計師來說，為畫面增加一些微互動的動態效果已經是時勢所趨，但 CSS 不比 Flash，需要透過 Code 的方式才寫出動態的效果，對很多視覺設計師來說是一道門檻，所幸網路上已經有很多資源將類似的動畫需求整合起來，只需要用點心去尋找，就可以找到許多功能強大的 CSS 動畫庫，下面我們挑五個比較有名且實用的來介紹。

全平台網站 icon 生成器

HTML & CSS、好工具不嫌少 / 作者: / 2021 年 6 月 4 日

記得早期做網頁的時候，網站完成後會另外畫一個 16×16 的小 icon，這個小 icon 會出現在網址列及我的最愛中，取代瀏覽器原本的預設 icon，成為一個私人的小特色。但後來由於設備的發展一日千里，手機、平板、iOS、Android、MAC、Windows 等等，每種平台對這些小 icon 接受的大小、格式及規範都有些許不同，如果要個別針對這些平台去製作小 icon 變得有點麻煩，且不一定有相關的設備可以提供測試，這時，該怎麼辦呢？

如何讓 Google Map 支援 RWD 的效果

HTML & CSS、好好沃克 / 作者: / 2020 年 10 月 24 日

我們在製作一些與行程或地點有關的網頁時，有時候會希望附上相關的地圖，好方便使用者了解附近的地理位置及規劃路線，這類的地圖應用以 Google Map 最常見，但 Google Map 內嵌到網頁的方式是使用 iframe，對一般的網頁也許不受影響，但如果遇到 RWD 的網頁時，就會發現 Google Map 提供的 iframe 並不會隨著設備的不同而去調整適當的比例，這時，你可以試試下面的方式。

如何同時 Hightline 表格中的行及列

HTML & CSS / 作者: / 2020 年 10 月 24 日

要將表格中的某一行 Highlight 起來很容易，你只要 tr:hover{background:yellow;} 就可以完成。但，如果你想同時 Highlight 行及列的時候，麻煩就會出現，因為在現有的 HTML & CSS 中，沒有針對「列」的設定。關於這個問題 MATT WALTON 提出一個解決的方式。

回到頂端