首先，我只写了部分代码。这是一个单独的 html 文件，将作为时事通讯邮寄给人们。我在这里使用表格，因为据我所知，这是迄今为止我们得到的最佳选择？好吧，那个问题是我的图像。我通常使用 img{max-width: 100%;}，因此图像永远不会覆盖文档的边缘，而是会自动缩小。当我使用表格时，我无法让它工作。对不起，非常混乱的代码，再次，我没有写它:)
这里还有一个预览链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ezzence.dk</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
table{
table-layout: fixed;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
body {
margin: 0;
padding: 0;
background-color: #fff;
width: 100%;
font-family: 'Lucida Sans Unicode', sans-serif;
}
td.permission {
padding: 5px 0 5px 0;
}
.permission p{
font-weight: normal;
color: #151515;
font-size: .8em;
}
.permission p a {
font-weight: normal;
color: #a72323;
}
td.header1 {
background-color: #fff;
}
td.header1 a img {
border: none;
}
td.header2 a img {
border:none;
}
table.content {
background-color: #fff;
}
td.sidebar a {
font-size: 11px;
font-weight: normal;
color: #000;
text-decoration: none;
}
td.sidebar ul {
margin: 0 0 0 24px;
padding: 0;
}
td.sidebar ul li,
td.sidebar ul li a {
font-size: 12px;
font-weight: normal;
color: #a72323;
}
td.sidebar h3 {
font-size: 16px;
font-weight: bold;
color: #333333;
margin: 10px 0 14px 0;
padding: 0;
}
p {
font-weight: normal;
color: #505050;
margin: 0 0 13px 0;
padding: 0;
}
td.sidebar p.buttons {
font-size: 11px;
font-weight: normal;
color: #505050;
margin: 0 0 4px 0;
padding: 0;
}
td.border {
border-right: 2px solid #e0e0e0;
}
td.mainbar a {
font-size: 14px;
font-weight: bold;
color: #000;
text-decoration: none;
}
td.mainbar h2 {
font-size: 16px;
font-weight: 800;
color: #000;
margin: 0 0 4px 0;
padding: 0 0 4px 10px;
border-bottom: 1px solid #cbcbcb;
}
td.mainbar h3 {
font-size: 18px;
font-weight: normal;
color: #000;
margin: 10px 0 16px 30px;
padding: 0;
}
td.mainbar h5 {
font-size: 16px;
font-weight: normal;
text-decoration:underline;
color: #000;
margin: 10px 0 16px 30px;
padding: 0;
}
td.mainbar p {
font-size: 14px;
font-weight: normal;
color: #000;
margin: 5px 30px 16px 30px;
padding: 0;
}
td.mainbar p.top {
font-size: 10px;
font-weight: bold;
color: #a72323;
margin: 0 0 30px 0;
padding: 0;
}
td.mainbar p.top a {
font-size: 10px;
font-weight: bold;
color: #f5f5f5;
}
td.mainbar ul {
font-size: 14px;
font-weight: normal;
color: #ffffff;
margin: 5px 30px 16px 50px;
padding: 0;
}
td.footer {
padding:10 70 10 70;
text-align:center;
padding-top: 13px ;
line-height: 1.8;
}
td.footer p {
font-family: 'Lucida Sans Unicode', sans-serif;
font-weight: normal;
color: #151515;
font-size: .8em;
}
a{
outline:none;
}
a image { border:0; }
a{
outline:none;
text-decoration: none;
color: #fff;
}
a image { border:0; }
#wrapper{
width: 960px;
max-width: 90%;
margin: 0 auto;
}
#info{
font-size: 12px;
font-weight: normal;
color: #151515;
margin: 0 auto;
text-align: center;
margin-bottom: 20px;
}
img{
max-width: 100%;
}
#navigation{
text-align:center;
}
#navigation ul li{
list-style-type: none;
font-weight: 600;
font-size: .85em;
font-family: Helvetica, sans-serif;
display: inline;
margin-right: 8%;
}
ul li a:hover{
color: #656565;
}
#maintext{
color: #222222;
margin-bottom: 50px;
font-size: .8em;
width: 100%;
line-height: 1.5;
}
#maintext h3{
font-size: 1.5em;
font-weight: bold;
}
#bottom_menu{
height: 30px;
}
#social_media{
float: left;
}
#social_media a{
}
#ezzence_desc h5{
font-size: 1.2em;
font-weight: bold;
color: #000;
padding: 0;
}
#ezzence_desc{
font-size: .8em;
text-align: center;
margin-bottom: 50px;
line-height: 1.5;
}
#bottom_text{
font-size: 10px;
font-weight: normal;
color: #151515;
margin: 0 auto;
text-align: center;
}
.social_button{
width: 32px;
height: 32px;
}
.centerimage{
display: block;
text-align: center;
}
#products{
width: 100%;
}
#products a{
}
.last_element{
padding: 0 !important;
}
#products a{
float: left;
max-width: 50%;
}
.productimganchor{
float: left;
}
.left{
float: left;
}
.right{
float: right;
}
.bottom_menu_item{
padding-bottom: 3px;
}
.bottom_menu_item a{
font-size: .9em;
-webkit-transition-property: color;
-webkit-transition-duration: .2s;
}
.bottom_menu_item a:hover{
color: #bcbcbc;
}
.menu_item{
padding:0px 55px 0px 0px;
}
.menu_item a, .last_element a{
color: #313131;
font-size: 1.2em;
font-weight: bold;
-webkit-transition-property: color;
-webkit-transition-duration: .2s;
}
.menu_item a:hover, .last_element a:hover{
color: #6f6f6f;
}
/* Mobile (portrait and landscape) */
@media screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* Mobile (landscape) */
@media screen and (min-width : 321px) {
}
/* Mobile (portrait) */
@media screen and (max-width : 320px), (max-device-width : 320px) {
.permission p{
color: red;
font-size: .8em !important;
}
img{
max-width: 100% !important;
}
.menu_item{
width: %;
}
.last_element{
width: 100%;
}
.products_div img{
}
}
@media screen and (max-width : 768px), (max-device-width : 768px){
p, p a{
font-size: 14pt !important;
}
.bottom_menu_item a{
font-size: 1.1em;
}
h4{
font-size: 1.8em;
}
#bottom_menu{
height: 50px;
}
.menu_item a, .last_element a{
font-size: 1.5em;
}
}
@media screen and (max-width : 763px), (max-device-width : 763px){
}
@media screen and (max-width : 850px), (max-device-width : 850px){
}
@media screen and (max-width : 645px), (max-device-width : 645px){
}
/* Tablet (portrait and landscape) */
@media screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* Tablet (landscape) */
@media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* Tablet (portrait) */
@media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
p{
font-size: 14px ;
}
}
/* Desktop */
@media only screen and (min-width:1025px){
}
/* High-Res */
@media
screen and (-webkit-min-device-pixel-ratio:2),
screen and (-moz-min.device-pixel-ratio:2),
screen and (min-device-pixel-ratio:2) {
}
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
</style>
</head>
<body>
<table id="wrapper" width="960" style="max-width: 90% !important; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table style="width: 100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td class="permission" align="center"><p> Årets støreste kampagne er i gang. Få tip til den perfekte øjenskygge til din øjenfarve.<br />
Fri fragt når du handler for 500 kr. Leveres indenfor 1-3 dage.<br />
Kan du ikke læse nyhedsbrevet? <webversion>Klik her</webversion></p></td>
</tr>
<tr style="border: 1px solid red;">
<td style="" class="header1" align="left" valign="bottom" ><a href="http://ezzence.dk" ><img src="img/header.jpg" border="0" alt="Ezzence Nyhedsbrev" /></a></td>
</tr>
<tr>
<td style="background-color:#fff; font-size:12px;" width="100%">
<table align="center" style="margin: 0 auto;">
<tr align="center">
<td class="menu_item"><a href="http://ezzence.dk/haar-pleje.html">Hårpleje</a></td>
<td class="menu_item"><a href="http://ezzence.dk/hudpleje.html">Hudpleje</a></td>
<td class="menu_item"><a href="http://ezzence.dk/krop-og-velvaere.html">Krop og Velvære</a></td>
<td class="menu_item"><a href="http://ezzence.dk/makeup.html">Make up</a></td>
<td class="menu_item"><a href="http://ezzence.dk/gaveideer.html">Gaveidéer</a></td>
<td class="last_element"><a href="http://ezzence-magazine.dk">Magazine</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><a href="http://ezzence.dk/weekendsale" target="_blank"><img src="img/nyhedsbanner.jpg" alt="ezzence kampagne" style="margin:10px 0;" border="0"/></a></td>
</tr>
<tr>
<td align="left">
<table width="100%" border="0" cellspacing="2" cellpadding="0" >
<tr>
<!-- Tekstindhold -->
<td class="mainbar" align="left" valign="top" width="500" style="margin-top:20px;" >
<br /><br />
<h3 style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:20px;font-weight:bold;color:#222222;" >Matcher din øjenskygge din øjenfarve?</h3>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;">Vidste du, at farven på din øjenskygge har stor betydning for intensiteten af dine øjne?</p>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;">Uanset om du har blå, grønne eller måske brune øjne, så kan den rigtige farve øjenskygge gøre underværker for intensiteten af dine øjne.</p>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;"><strong>Grønne øjne:</strong> hvis du vælger en farve med rød-lilla pigmenter fremhæves det grønne i dine øjne.</p>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;"><strong>Blå øjne:</strong> vælg farver med orange, gyldne eller bronze pigmenter, der komplimenterer den blå farver og får den til at virke skarpere og mere intens.</p>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;"><strong>Brune øjne:</strong> brune øjne er fantastiske. Hvis bare du holder dig fra en brun øjenskygge, der har nøjagtig samme farve som dine øjne, så kan du ikke gå galt i byen.</p>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;">Tag et kig på vores mange fine øjenskygger på ezzence.dk eller find makeup fra: <a href="http://ezzence.dk/maerker/janeiredal.html" target="_blank">Jane Iredale</a>, <a href="http://ezzence.dk/maerker/youngblood.html" target="_blank">Youngblood</a>, <a href="http://ezzence.dk/maerker/smashbox.html" target="_blank">Smashbox</a> og mangel flere. </p>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;">De bedste hilsner<br />
Sofie – <a href="http://ezzence.dk" target="_blank">ezzence.dk</a></p>
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 13px; font-weight:regular; color:#222222;"><strong>Psst..</strong>Husk at vi stadig har 20-60 % på mere end 3000 skønhedsprodukter, find hele kampagnen lige <a href="http://ezzence.dk/weekendsale" target="_blank">her</a>.</p>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
<a href="http://ezzence.agillic.eu/pclk/Q7PVJ/Week26sunday/0?ct_id=[EMAIL]">
<img alt=""src="img/ole_henriksen.jpg"/>
</a>
<a href="http://ezzence.agillic.eu/pclk/Q7PVJ/Week26sunday/1?ct_id=[EMAIL]">
<img alt="" src="img/clean.jpg"/>
</a>
<div class="products_div">
<div style="float:left; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/clean.html" target="_blank"><img src="img/clean_2.jpg" alt="Billede"/></a></div>
<div style="float:right;border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/janeiredal.html" target="_blank"><img src="img/jane.jpg" alt="Billede" /></a></div>
</div>
<div class="products_div">
<div style="float:left; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/john-masters-organics.html" target="_blank"><img src="img/john.jpg" alt="Billede"/></a></div>
<div style="float:right; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/joico.html" target="_blank"><img src="img/joico.jpg" alt="Billede"/></a></div>
</div>
<div class="products_div">
<div style="float:left; width:355 px; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/kevin-murphy.html" target="_blank"><img src="img/kevin.jpg" alt="Billede"/></a></div>
<div style="float:right; width:355 px; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/opi.html" target="_blank"><img src="img/opi.jpg" alt="Billede"/></a></div>
</div>
<div class="products_div">
<div style="float:left;border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/ole-henriksen.html" target="_blank"><img src="img/ole.jpg" alt="Billede"/></a></div>
<div style="float:right; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/nuxe.html" target="_blank"><img src="img/nuxe.jpg" alt="Billede"/></a></div>
</div>
<div class="products_div" >
<div style="float:left; border: 1px #e3e3e3 solid;"><a href="http://ezzence.dk/maerker/paul-mitchell.html" target="_blank"><img src="img/paul.jpg" alt="Billede"/></a></div>
<div style="float:right; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/youngblood.html" target="_blank"><img src="img/yb.jpg" alt="Billede"/></a></div>
</div>
<div class="products_div" >
<div style="float:left; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/tigi.html" target="_blank"><img src="img/tigi.jpg" alt="Billede"/></a></div>
<div style="float:right; border: 1px #e3e3e3 solid ;"><a href="http://ezzence.dk/maerker/clinique.html" target="_blank"><img src="img/clinique.jpg" alt="Billede"/></a></div>
</div>
<br/><br/>
<table align="center" style="position:relative; margin-top:20px; margin: 0 auto; ">
<tr>
<td align="center" style="">
</td>
<td align="center" style="width: 100%; padding-top: 25px;">
<a href="https://www.facebook.com/ezzence.dk" target="_blank"><img src="img/se-flere.jpg" alt="seflere"/></a>
<br/><br/>
<a href="https://www.facebook.com/ezzence.dk" target="_blank"><img src="img/facebook.jpg" alt="facebook"/></a>
<br/><br/>
<a href="http://www.ezzence-magazine.dk/" target="_blank"><img src="img/blog.jpg" alt="magazine"/></a>
</td>
</tr>
</table>
<table align="left" cellspacing="0" cellpadding="0" bgcolor="#000" style="width: 100%; ">
<tr id="bottom_menu" style="background-color: black; text-align: center; ">
<td class="bottom_menu_item"><a href="http://ezzence.dk" target="_blank">ezzence.dk</a></td>
<td class="bottom_menu_item"><a href="http://ezzence.dk/kundeservice" target="_blank">Kundeservice</a></td>
<td class="bottom_menu_item"><a href="http://ezzence.dk/handelsbetingelser" target="_blank">Handelsbetingelser</a></td>
<td class="bottom_menu_item"><a href="http://ezzence.dk/handelsbetingelser" target="_blank">Levering & Returnering</a></td>
<td class="bottom_menu_item"><a href="http://ezzence.dk/contacts/" target="_blank">Kontakt os</a></td>
</tr>
</table>
<table align="center" cellspacing="0" cellpadding="0" style="margin: 0 auto; padding-top: 20px; padding-top: 15px;">
<tr>
<td width="32px" style="float: left; padding:0px 0px 0px 4px;"><a href="https://www.facebook.com/ezzence.dk" target="_blank"><img src="http://ezzence.dk/media/images/nyhedsbrev/2012/ikoner/facebookicon.jpg" height="32" width="32"border="0" alt="Facebook" /></a></td>
<td width="32px" style="padding:0px 0px 0px 0px;" ><a href="http://www.youtube.com/ezzenceDK" target="_blank"> <img src="http://ezzence.dk/media/images/nyhedsbrev/2012/ikoner/youtubeicon.jpg" height="32" width="32"border="0" alt="Youtube" /></a></td>
<td width="32px" style="padding:0px 0px 0px 0px;" ><a href="http://twitter.com/#!/ezzence_dk/" target="_blank"><img src="http://ezzence.dk/media/images/nyhedsbrev/2012/ikoner/twittericon.jpg" height="32" width="32"border="0" alt="Twitter" /></a></td>
</tr>
</table>
<table align="center" style="margin: 0 auto; padding-top: 8px;">
<tr>
<td><a href="http://www.trustpilot.dk/review/www.ezzence.dk" target="_blank"><img src="img/trustpilot.jpg" border="0" alt="Trustpilot"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" style="padding: 20px;">
<h4>Eksklusive og økologiske skønhedsprodukter</h4>
<p>Formålet med ezzence.dk er at gøre eksklusive skønhedsprodukter tilgængelige for den kvalitetsbevidste forbruger. Tilgængelige i den forstand, at du som forbruger vil kunne finde et stort udvalg af mange af de mest innovative og lækre luksusmærker på ezzence.dk - lige fra mærker med gennembrydende teknologi til økologiske skønhedsprodukter.</p>
</td>
</tr>
<tr>
<td align="center" class="footer" style="border-top: 1px dashed #898989; padding: 20px;">
<p>Kampagnen er gældende fra d.27.06. til d.02.07.<br/>
Priserne er beregnet ud fra vejledende udsalgsspris. Vi tager forbehold for udsolgte varer, prisfejl og trykfejl.
<br/>Ønsker du ikke længere at modtage nyhedsbrevet? - <unsubscribe>Klik her</unsubscribe></p>
<a href="http://ezzence.dk" target="_blank"><img src="img/ezzence.jpg" border="0" alt="ezzence"/></a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>