最近一直在忙找工作，好久都沒有寫過博客了，就是上周，我剛入職的第一周，leader問我有沒有寫過EDM，我連EDM是啥都不知道，但是還是放心的交給了我，只告訴我用table布局，樣式寫在行內。然后就給我一張效果圖，看起來不是太復雜。而且是定寬高的那種。
然后就開始碼代碼，我的確是用來table進行布局，只是里面用了好多p和ul標簽，然后天真的加了許多margin和padding進行調整。然后在瀏覽器上看了一下效果，和效果圖一樣，然后用qq郵箱發了HTML格式的郵件，打開郵件一看當時就懵逼了，完全兩個模樣，打開控制台一看，我的標簽好多都給我轉換了，簡直變得面目全非。
仔細觀察發現，好多樣式都沒有加上，郵件自動給過濾了，比如padding，margin等，然后我嘗試用另一種方式去實現這個模板，直接就重新做了一版，全部都用table自帶的標簽以及自帶的屬性，想通過align和valign實現居中，於是乎就重寫了代碼。去掉了ul標簽以及p標簽，碼完代碼又重新發了一遍郵件，效果比之前好多了，只是在居中方面還是有問題，在客戶端中沒有實現居中，也就是說table自帶的居中屬性失效了。。。。
發現問題后便是解決問題了。其實table利用三列布局，中間td定寬或者根據內容自適用，兩邊td不設寬度，出來效果就是兩側td寬度相等，中間內容水平居中的效果
上面這些操作其實基本已經可以實現具體的效果了，但是在我這還有一個問題，是在小米手機內置郵箱軟件中會將img的原始大小顯示出來，也就是我給它設置的寬高沒起作用，我試着給它的父標簽設置寬高，可是還是不行，最后我用style方式給他加了寬高，而且通過important賦予最高級別，結果搞定了，其實一般來說不建議用style給元素設置寬高，因為有的軟件會直接將style過濾掉，這里只能做一個兼容性處理，通過width和height並且加上style賦上important界別的寬高，所以，保全期間，再給img設置大小是還是采用雙管齊下的方式吧。
下面賦上代碼結構
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table width = "100%" bgcolor = "#ededed"> <tr> <td></td> <td width = "600"> <table width = "600" bgcolor = "white" style="border-top:2px solid #ff4a02;"> <!--頂部40px空白--> <tr> <td height="30" width = "600" colspan="3"> </td> </tr> <!--頂部標題和logo--> <tr> <td colspan="3"> <table width = "600"> <tr> <td width="40"> </td> <td align = "left" style = "font-size:20px;font-weight:600;"> 滿五周年員工信息 </td> <td width="40"> <img width="40" height="40" src="http://10.236.91.5:8888/001/logo.jpg" style="width:40px !important;height:40px !important;"> </td> <td width="40"> </td> </tr> </table> </td> </tr> <!--頂部大圖--> <tr> <td colspan="3"> <img width = "600" src="http://10.236.91.5:8888/001/big-title.jpg" style="width:600px !important;"> </td> </tr> <!--40px空白--> <tr> <td colspan="3"> </td> </tr> <!--問候語--> <tr> <td width="40"> </td> <td align = "left" valign="middle" style = "font-size:20px;font-weight:600;">總 您好 </td> <td width="40"> </td> </tr> <!--40px空白--> <tr> <td colspan="3"> </td> </tr> <!--摘要--> <tr> <td width="40"> </td> <td align = "left" valign="middle" style="font-size:16px;">如下是小米網2016年6月18日至2016年6月24日之間滿五周年的員工信息，共計3人 </td> <td width="40"> </td> </tr> <!--分割線--> <tr> <td width="40"> </td> <td style="border-bottom:1px solid #e5e5e5;"> </td> <td width="40"> </td> </tr> <!--40px空白--> <tr> <td width="40"> </td> <td> </td> <td width="40"> </td> </tr> <!--數據列表--> <tr> <td width="40"> </td> <td> <table height = "200"> <tr> <td width="20"></td> <td> <table height = "200" style="border:1px solid #aa6a51;margin:auto;"> <tr> <td width = "160" height="200" bgcolor="red"> <table width = "160" height = "200"> <tr><td height ="20"> </td></tr> <tr><td align ="center" width="116" height="160"><img src="http://b2c-mioa-res/2ee0ba87-fe60-4654-873d-d50752ed91c1?thumb=1&w=1000&h=1000" width="116" height="160" style="width:116px !important;height:160px !important"></td></tr> <tr><td height ="18"> </td></tr> </table> </td> <td width="20"> </td> <td width="260"> <table width = "100%"> <tr align="left"> <td height = "40" style="font-size:20px;font-weight:600;color:black;">丁強<span style="color:#a0a0a0;">(709)</span> </td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">五周年紀念: <span style="color:#a0a0a0;">09月21日</span></td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">崗位: <span style="color:#a0a0a0;">SPA工程師</span></td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">部門: <span style="color:#a0a0a0;">平台研發部</span></td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">電話: <span style="color:#a0a0a0;">1830395</span></td> </tr> <tr align="left"> <td height="24"><span>郵箱: </span><a href="http://www.baidu.com/" style="font-size:14px;color:#f24e28;">yuqiang@.com</a></td> </tr> </table> </td> </tr> </table> </td> <td width="20"></td> </tr> </table> </td> <td width="40"> </td> </tr> <!--40px空白--> <tr> <td width="40"> </td> <td colspan="2"> </td> </tr> <tr> <td width="40"> </td> <td> <table height = "200"> <tr> <td width="20"></td> <td> <table height = "200" style="border:1px solid #aa6a51;margin:auto;"> <tr> <td width = "160" height="200" bgcolor="red"> <table width = "160" height = "200"> <tr><td height ="20"> </td></tr> <tr><td align ="center" width="116" height="160"><img src="http://2ee0ba87-fe60-4654-873d-d50752ed91c1?thumb=1&w=1000&h=1000" width="116" height="160" style="width:116px !important;height:160px !important"></td></tr> <tr><td height ="18"> </td></tr> </table> </td> <td width="20"> </td> <td width="260"> <table width = "100%"> <tr align="left"> <td height = "40" style="font-size:20px;font-weight:600;color:black;">丁強<span style="color:#a0a0a0;">(709)</span> </td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">五周年紀念: <span style="color:#a0a0a0;">09月21日</span></td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">崗位: <span style="color:#a0a0a0;">SPA工程師</span></td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">部門: <span style="color:#a0a0a0;">平台研發部</span></td> </tr> <tr align="left"> <td height="24" style="font-size:16px;">電話: <span style="color:#a0a0a0;">1830395</span></td> </tr> <tr align="left"> <td height="24"><span>郵箱: </span><a href="http://www.baidu.com/" style="font-size:14px;color:#f24e28;">yuqiang@.com</a></td> </tr> </table> </td> </tr> </table> </td> <td width="20"></td> </tr> </table> </td> <td width="40"> </td> </tr> <!--分割線--> <tr> <td width="40"> </td> <td style="border-bottom:1px solid #e5e5e5;"> </td> <td width="40"> </td> </tr> <!--40px空白--> <tr> <td width="40"> </td> <td> </td> <td width="40"> </td> </tr> <tr> <td width="40"> </td> <td colspan="2" align="left" style="font-size:20px;font-weight:600;">祝福語推薦</td> </tr> <!--40px空白--> <tr> <td colspan="3"> </td> </tr> <tr align="left"> <td width="40"> </td> <td style="font-size:16px;">過去的五年，是艱苦創業的五年，是努力拼搏的五年，也是公司值得驕傲的五年。廣大員工，沿着公司發展的方向，兢兢業業，努力拼搏，愛崗敬業，朝着共同的目標一同奮進，取得了巨大的成績。</td> <td width="40"> </td> </tr> <!--40px空白--> <tr> <td colspan="3"> </td> </tr> <tr align="left"> <td width="40"> </td> <td style="font-size:16px;">辛苦五年，我們創造佳績，努力五年，我們成就奇跡，來年更需積極，努力團結一起，全員一起奮斗，公司創新天地，願你身體健康，萬事如意，合家快樂，幸福甜蜜。<span style="color:#f24e28">復制</span></td> <td width="40"> </td> </tr> </table> </td> <td></td> </tr> </table> </body> </html>
