Day: December 27, 2021

網頁設計

用html寫email教學及注意事項

網頁設計工作中常常會有需求向用戶發送電子郵件，需要前端工程師來製作html格式的email郵件，但是由於郵件客戶端對樣式的支持有限，要兼容很多種瀏覽器，所以需要注意很多原則： 1.郵件基本上只能使用table+css佈局 2.郵件主要部分在body內部，所以樣式一定要寫成內嵌(inline css)的，不能在head標籤中寫style，也不能外聯(external link)。 如： 收到的email效果： 3.不能用浮動的方式定位。position：absolute;float:left;等都不行，float在部分郵箱客戶端中可以識別，但是在outlook中無法識別。 4.表格的border，使用table上的border屬性，可以在部分瀏覽器中兼容，但是在outlook中打開是沒有邊框的，這種情況，只能給每一個td加一個border，在table中使用border-collapse:collapse;來合併重復的邊框。 如： 這樣設置border會在outlook中顯示不出border； 5.為了保證兼容性，需要把郵件的寬度設置為600px，最大600px； 6.少用img，因為很多郵箱客戶端默認不顯示圖片（安全等原因），所以，如果需要圖片的話，一定要寫好alt和title看不到圖片也知道想表達什麼； 7.背景圖片，盡量用background-color使用純色背景，如果一定要用背景圖片，使用background屬性， 8.郵件不支持javascript，flash以及一些特殊的標籤。 由於郵件客戶端(Mail client)對css支持各有不同，所以一定要多測試再發送，保證樣式的正確。如果出現了不兼容的情況，一定要耐心的使用最簡單的方式進行兼容，盡量少用特殊標籤及比較複雜的css屬性。 以上就是用HTML寫Email的教學，如有不清楚可留言。

Read More