0
HTML 전자 메일을 만들기 위해 일부 html 코드를 작성하고 있습니다. 몇 가지 연구를 해봤는데 테이블과 같은 오래된 학교의 html을 사용하는 것이 가장 좋은 방법이라는 것을 알았습니다.HTML 전자 메일 중첩 테이블
이전 문제 (도움 주셔서 감사합니다!)를 통해 도움을 주신 후 나머지 작업에 착수하여 레이아웃을 모바일 장치에서 읽기 쉽게 만들어 주셨습니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=yes">
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
p { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:0.9em;}
.contact {margin-left:5px; margin-top:15px; width:170px; font-size:0.9em; text-align:center;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;}
a img {border:none;}
.headerwrapper {width:600px; background-color: #000000; margin:0px; padding:0px;}
.header {text-align:center;}
.wrapper {width:600px; background-color: #dbdadb; align:center;}
.fixedwidth {width:600px !important;}
.content {width:340px;}
.icons {width:260px;}
.devices {width:600px; height:310px;}
.miniwrapper {width:600px;}
.footer { background-image: url(http://i49.tinypic.com/54f2ac.png); text-align:center; line-height:1.2; width:320px; font-size:0.9em;}
.footermobile {display:none;}
.actiemobile {display:none;}
.iconwrapper {margin:0; line-height:1.2; font-size:0.9em;}
.iconwrapper p {margin-left: 0px; margin-bottom:10px;}
.headermobile {display:none;}
.devicesmobile {display:none;}
@media all and (max-width: 400px) {
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb;}
p { margin:0 0 10px 26px; line-height:1.2; width:350px; font-size:0.9em;}
.contactmobile {margin-left:50%; margin-top:15px; width:170px; font-size:1.1em; text-align:center; line-height:1.2em;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
.headerwrapper {width:320px; background-color: #000000; margin:0px; padding:0px;}
.header {display:none;}
.wrapper {width:100%; background-color: #dbdadb; align:center;}
.fixedwidth {width:100% !important;}
.content {width:320px; display:block;}
.icons {width:260px; display:block;}
.devices {display:none;}
.miniwrapper {width:100%;}
.footer {display:none;}
.actie {display:none;}
.footermobile {display:block; background-image: url(footermobile.png); text-align:center; line-height:1.2; width:320px; height:164px; font-size:0.9em;}
.actiemobile {display:block;}
.headermobile {display:block; text-align:center;}
.devicesmobile {display:block;}
}
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
/* End reset */
</style>
<title>email template</title>
</head>
<body>
<table class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth" colspan="2">
<img src="logo.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td colspan="2">
<img src="devices.png">
</td>
</tr>
<tr class="headermobile">
<td class="fixedwidth" colspan="2">
<img src="logomobile.png" border="0">
</td>
</tr>
<tr class="devicesmobile">
<td colspan="2">
<img src="devicesmobile.png">
</td>
</tr>
</tbody>
<tr class="miniwrapper">
<tr class="fixedwidth">
<td class="content" align="left">
<h1>Werkt u al met apps?</h1>
<p>Het ontwikkelen van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en
bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>
<p>Mocht u geïnteresseerd zijn in onze service,
van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op.
U bent van harte welkom voor een kop koffie bij ons in de mediaBunker, tijdens een verkennend gesprek of een demonstratie van de
mogelijkheden van mediaBunker als bedrijf.</p>
<p>Alvast bedankt en hopelijk tot ziens.</p>
</p>
</td>
<td class="icons">
<table>
<tr>
<td colspan="2">
No matter what device.<br>
We build natively.
</td>
</tr>
<tr>
<tbody class="iconwrapper">
<tr text-align="center">
<td><img src="apple.png"></td>
<td><p>Apple iOS is the operating<br>
system that powers the <br>
iPhone, iPad and iPod touch.</p>
</td>
</tr>
<tr>
<td><img src="android.png"></td>
<td><p>With partners like Google,<br>
HTC and Motorola, Android is <br>
the fastest growing mobile OS.</p>
</td>
</tr>
<tr>
<td><img src="windows.png"></td>
<td><p>Together Microsoft and Nokia<br>
support conventional users <br>
with Windows Phone.</p>
</td>
</tr>
<tr>
<td><img src="html5.png"></td>
<td><p>Looking for other platforms<br>
like BlackBerry, Samsung <br>
Bada or HTML5 & CSS3?<br>
We can build it!</p>
</td>
</tr>
</tbody>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td class="actie" colspan="2">
<img src="http://i47.tinypic.com/11qi7pw.png">
</td>
<td class="actiemobile" colspan="2">
<img src="actiemobile.png">
</td>
</tr>
<tr>
<td class="footer" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center"><p class="contact">Suikersilo-West 23 <br> 1165 MP Halfweg</p></td>
<td width="200px" text-align="center"><p class="contact"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:[email protected]">[email protected]</a></p></td>
<td width="200px" text-align="center"><p class="contact"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></p></td>
</tr>
</table>
</td>
<td class="footermobile" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center">
<p class="contactmobile">
Suikersilo-West 23<br>
1165 MP Halfweg<br>
<a href="tel:0031238200140">Tel +31 23 820 0140</a><br>
<a href="mailto:[email protected]">[email protected]</a><br>
<a href="http://mediabunker.com">www.mediabunker.com</a><br>
<a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a><br>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
휴대 기기에서 레이아웃이 제대로 작동하지 않는 데 문제가 있습니다. 나는 더 나은 솔루션을 생각해 냈지만 배경 이미지를 사용하고 그 위에 다른 이미지 (장치, 배너 등)를 배치하는 것이 좋습니다. 아마 그 문제를 해결할 것입니다.
다른 두 가지 문제가 있습니다. 모바일 장치에서 페이지를 볼 때 콘텐츠 아래에 아이콘이 표시되지 않습니다. 나는 디스플레이 블록이 트릭을 할 것이라고 생각했지만 그렇지 않다 ... 또한 아이콘 테이블을 추가 할 때 나타나는 오른쪽에 이상한 공간이있다. 어떤 식 으로든 충돌해야한다. 어떻게 해결해야 하는가?
이것이 도움이된다면, 이것은 제 이전 질문이었습니다. HTML email table nesting 그리고 이것은 온라인 버전입니다. http://kellyvuijst.nl/email/email.html
'이상한'공간에 대해 이야기 할 때 첫 번째 문제를 해결해 주셔서 감사합니다. 오른쪽의 검은 색 영역과 회색 영역 (배경이없는 영역) 레이아웃 종류가 깨집니다. – Jane
아, 알겠습니다. 내 대답을 편집했습니다. –
이 문제는 여전히 해결되지 않는 것이 두렵습니다. 코드를 피우다 (Google 크롬 사용) 문제가 여전히 동일합니다. 여기에 예제가있다. http://kellyvuijst.nl/email/Untitled.html – Jane