假设我有一封很棒的 html 电子邮件。 Gist .
我想把它放在一个用 bootstrap 制作的 HTML 页面中。像这样:
<div class='col-md-4'>
<h1>Hello</h1>
</div>
<div class='col-md-8'>
HERE
</div>
如果我马上去做，我的风格就会被打破。一切都变得一团糟。如果我开始从消息中删除样式，它将开始失去其颜色、字体大小等。
基本上，我想保持消息完好无损，但我需要满足以下条件:
- Message 保留其电子邮件样式，不会覆盖外部文档样式
- 外部文档保持其 Bootstrap 样式
- 消息完全适合 col-md-8 div，没有破坏任何东西
这可能吗？
最佳答案
您可以使用 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。
注意只需确保将您当前的网页重命名为 someName.html至 someName.php并确保您的 email.php与主文件位于同一目录中，您可以开始了。
您提到您希望主网页和电子邮件网页的样式相互独立。为此，只需将您的 email.php 内容用 div 包装器包装起来，如下所示:
<div id="specialStyle">
<!-- your email content -->
</div>
现在对于两个页面上 id 或 class 相同的任何元素，说:
#commonName { /* <---- This is the main webpage --> */
font-size:14px;
}
#commonName { /* <---- This is the email webpage --> */
font-size:18px;
}
只需添加 #specialStyle像这样的电子邮件版本:
#specialStyle #commonName {
font-size:18px;
}
关于javascript - 在不破坏样式的情况下将 html 字母放入 bootstrap div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32542880/