我制作了一个 html 页面，在普通浏览器中打开时可以正常打开。但是当我将其作为电子邮件发送时(最好是设计师电子邮件)，它无法正常工作。
问题 1:按钮阴影未显示。
问题 2:当我按下按钮时，文本没有被复制。
Html代码email_final.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>email</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alike">
</head>
<body class="height:1308px;width:995px;" style="height:1308px;width:995px;">
<header style="background-color:#F39325;height:359px;width:999px;"><img src="https://firstwbst.000webhostapp.com/android/assets/img/company_logo.png" style="display:block;margin-left:auto;margin-right:auto;width:183px;height:208px;">
<h1 class="text-center" style="color:rgb(255,255,255);font-family:Alike, serif;margin-top:18px;text-align:center;display:block;margin-left:auto;margin-right:auto;">Welcome ##% name %##,</h1>
<h2 class="text-center" style="font-family:Alike, serif;color:rgb(254,255,255);display:block;margin-left:auto;margin-right:auto;text-align:center;margin-top:18px;">Welcome! Thank you for signing up with Home Cooked.</h2>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;margin-top:42px;margin-left:58px;color:rgb(0,0,0);">Please take a moment to verify your email address.</p>
<p style="font-size:30px;font-family:Alike, serif;margin-left:58px;font-weight:700;margin-top:32px;color:#000000;">Username: ##% email %##</p>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;text-align:center;margin-top:82px;text-decoration:underline;color:#000000;">Your verification code is:</p>
<p id="p1" style="font-size:90px;font-family:Alike, serif;font-weight:700;border:4px solid #000000;border-style:solid;border-radius:57px;display:inline;text-align:center;padding-left:100px;padding-right:100px;padding-bottom:20px;padding-top:20px;margin-left:227px;margin-top:21px;color:#000000;">##% otp %##</p>
<button onclick="copyToClipboard('#p1')" class="btn btn-primary" type="button" style="background-color:#f39325;border-radius:40px;height:85px;width:233px;margin-right:0;margin-left:369px;margin-top:41px;font-family:Alike, serif;font-size:25px;">Copy Code</button>
<p style="font-size:25px;font-family:Alike, serif;margin-left:58px;font-weight:600;margin-top:38px;margin-right:58px;color:#000000;">If you are having any issues with your account, please don't hesitate to contact us by replying to this mail. </p>
<p style="font-size:20px;font-family:Alike, serif;font-weight:500;color:rgba(2,2,2,0.55);text-align:center;margin-top:34px;">If you didn't make this request, please ignore.</p>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
</body>
</html>
我正在使用 php 脚本发送邮件sendMail.php:
$subject = "User Verification";
$from = "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7303011c1e1c171112141b1f1233141e121a1f5d101c1e" rel="noreferrer noopener nofollow">[email protected]</a>";
$headers = "MIME-Version: 1.0" . "\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\n";
$template = file_get_contents("email_final.html");
$variable['email'] = "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d68606c646164694d6a606c6461236e6260" rel="noreferrer noopener nofollow">[email protected]</a>";
$variable['name'] = "Sayok";
$variable['otp'] = "036543";
$template = str_replace('##% name %##',$variable['name'],$template);
$template = str_replace('##% otp %##',$variable['otp'],$template);
$template = str_replace('##% email %##',$variable['email'],$template);
mail($variable['email'],$subject,$template,$headers)
最佳答案
- 将按钮CSS(即阴影)放入按钮的内联CSS内。
- 电子邮件无法处理 JavaScript，因此您不能这样做。
关于php - 当 html 代码作为电子邮件发送时，事情无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51171023/