包裝器
包裝器建立必要的結構來包裝元素,以便套用全寬背景。
基礎
使用 Inky HTML 時,<wrapper>
標籤會建立 <table>
、<tr>
、<th>
結構,以建立一致的全寬背景。您可以在包裝器中加入類別,以鎖定其 CSS 屬性或鎖定其內的元素。.wrapper-inner
類別可用於在包裝器中加入內距。
HTML
<wrapper>
content
</wrapper>
<html>
<head></head>
<body>
<table class="wrapper" align="center">
<tbody>
<tr>
<td class="wrapper-inner">
content
</td>
</tr>
</tbody>
</table>
</body>
</html>
示範
全寬 (流動) 標頭或頁尾
使用 <wrapper>
元件建立流動標頭相當簡單。包裝 <container>
會讓您的內容限制在容器的寬度內。在 <wrapper class="">
中加入類別,以加入背景顏色。
HTML
<style type="text/css">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
margin-bottom: 0;
}
.header .wrapper-inner {
padding: 20px; /*controls the height of the header*/
}
.header .container {
background: #8a8a8a;
}
.wrapper.secondary {
background: #f3f3f3;
}
</style>
<wrapper class="header" bgcolor="#8a8a8a">
<container>
<row class="collapse">
<columns small="6" valign="middle">
<img src="https://placehold.it/200x50/663399">
</columns>
<columns small="6" valign="middle">
<p class="text-right">BASIC</p>
</columns>
</row>
</container>
</wrapper>
<html>
<head>
<style type="text/css">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
margin-bottom: 0;
}
.header .wrapper-inner {
padding: 20px;
/*controls the height of the header*/
}
.header .container {
background: #8a8a8a;
}
.wrapper.secondary {
background: #f3f3f3;
}
</style>
</head>
<body>
<table bgcolor="#8a8a8a" class="wrapper header" align="center">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="small-6 large-6 columns first" valign="middle">
<table>
<tbody>
<tr>
<th>
<img src="https://placehold.it/200x50/663399">
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last" valign="middle">
<table>
<tbody>
<tr>
<th>
<p class="text-right">BASIC</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
示範
在容器外使用此結構會產生流動寬度背景,並擴展至電子郵件用戶端視窗的寬度。