Iconify Design 隨時取用超過 150,000 個開放原始碼的 SVG 向量圖示對於圖標圖示來說,使用傳統的 png、jpg 或 bmp 圖檔常會遇到縮放性問題。這些位圖格式的核心是像素,因此放大或縮小會導致像素失真,使圖片變得模糊或出現鋸齒狀效果。相較之下,SVG 是向量圖形,以數學公式表示圖像,在縮放時不會失真,保持圖片的清晰度和品質。因此,對於需要頻繁縮放的圖標圖示,使用 SVG 格式是一個不錯的選擇。線上工具程式設計2023/08/03閱讀全文
如何將 YouTube 影片嵌入網頁並自適應調整播放尺寸iframe 可將 width 及 height 屬性都設定成 100%,但就是無法讓嵌入的 YouTube 影片可自動適應網頁大小,究其原因在於其父容器,換句話說,將 iframe 的 width 及 height 屬性都設定成 100% 沒錯,但如果仍無法讓影片自動適應網頁大小的變化,那麼,問題就出現在包裹 iframe 的 HTML 元素,iframe 元素的寬度和高度會依賴其父容器的寬度和高度,所以父容器也須有明確的寬度和高度設定,否則 iframe 的 100% 設定將無效。線上工具程式設計2023/07/24閱讀全文
HTML Wave AI 讓 AI 產生符合文字描述且可自適應的網頁結構使用 AI 輔助寫程式碼、文章、簡報和產圖,可以大幅提高效率。那麼,如果我們想利用 AI 來生成網頁布局,該怎麼操作呢?HTML Wave AI 是一個非常有用的網站,它讓用戶可以用文字描述他們想要的網頁布局,然後直接生成相應的 HTML 及 CSS 語法和 JavaScript 程式碼,而這些生成的語法與程式碼符合自適應網頁設計(Responsive web design,RWD),並且我們可以在線上即時預覽網頁效果。線上工具程式設計2023/06/28閱讀全文
HTML CSS TOOLS 網頁常用的 HTML 及 CSS 語法產生器HTML CSS TOOLS 網站,則是將網頁上常用到的 CSS,例如 Text Formatting、Layout、Background、Borders 及 HTML 會用到的 Embedding、Form 等做出範例,而這些範例會提供參數讓用戶可以自行更改,每次更改就會反應到範例,讓用戶可以透過範例學習,而這些都會產生相對應的 HTML 及 CSS 語法,複製就可以使用。線上工具程式設計2023/06/26閱讀全文
如何讓網頁內的電子郵件連結改用GMail開啟?而隨著雲端應用的方便性,多數人會將原在作業系統收發信件的習慣,逐漸轉向在網路收發電子郵件,除了有多設備存取的方便性外,還可以減少受到惡意程式的攻擊, 因此,如果想在網頁內提供使用者可以直接開啟 GMail 來撰寫郵件的連結,我們可以捨棄原 mailto 寫法,改用 Gmail 連結來實作即可。線上工具程式設計2023/05/22閱讀全文