【发布时间】：2018-07-04 10:04:35
【问题描述】：
我制作了一个 html 页面，在普通浏览器中打开时可以正常打开。但是当我将它作为电子邮件发送时（最好是设计师电子邮件），它无法正常工作。
问题一：按钮阴影不显示。
问题 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 = "promodbaghla@gmail.com";
$headers = "MIME-Version: 1.0" . "\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\n";
$template = file_get_contents("email_final.html");
$variable['email'] = "emailid@gmail.com";
$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 属性复制到：email_final.html 吗？
-
每个元素的 css 属性都是内联的，所以没有问题。 AbdushSamadMiah
-
firstwbst.000webhostapp.com/android 单击此链接以查看 html 代码是否正常工作。）所以我可以说代码没问题，但是当附加到邮件时，发生了一些事情使代码无法正常工作.