Question

我们说我有这封精彩的html电子邮件信件。 Gist

我想将它放在用bootstrap制作的HTML页面中。像这样：

<div class='col-md-4'>
  <h1>Hello</h1>
</div>

<div class='col-md-8'>
  HERE
</div>

如果我马上做，我的风格就会破裂。一切都变得一团糟。如果我开始从消息中剪切样式，它将开始失去颜色，字体大小等。

基本上，我希望保持信息的完整性，但我需要以下内容：

消息保留其电子邮件样式，而不是覆盖外部文档样式
外部文档保持其引导样式
消息非常适合col-md-8 div，而不会破坏任何内容

这甚至可能吗？

Answer 1

您可以使用iframe，也可以使用php include。

对于后者，只需将电子邮件正文内容（<body>....</body>内的内容）复制到新文件并命名为email.php（别担心。只涉及一行PHP ）。

然后在您当前的网页中添加如下所示的php include行：

<div class='col-md-4'>
  <h1>Hello</h1>
</div>

<div class='col-md-8'>
  <?php include 'email.php';?>
</div>

然后，将<style>....</style>中的css复制到一个新文件，比如说`email.css'，并将当前网页（不是email.php）链接到该css。

NB 只需确保将当前网页从someName.html重命名为someName.php，并确保您的email.php与主要网页位于同一目录中文件，你很高兴。

您提到您希望主网页和电子邮件网页的样式相互独立。为此，只需使用div包装器封装您的email.php内容：

<div id="specialStyle">
    <!-- your email content -->
</div>

现在，对于两个页面上id或类相同的任何元素，请说：

#commonName { /* <---- This is the main webpage --> */
    font-size:14px;
}
#commonName { /* <---- This is the email webpage --> */
    font-size:18px;
}

只需将#specialStyle添加到电子邮件版本中，如下所示：

#specialStyle #commonName {
    font-size:18px;
}

将html字母放入bootstrap div而不会破坏样式

1 个答案: