Question

我制作了一个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 = "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)

Answer 1

将按钮CSS放置在按钮的内联CSS内，即阴影。
电子邮件无法处理javascript，因此您无法处理。

当HTML代码作为电子邮件发送时，事情无法正常工作

1 个答案: