需要在Windows Outlook中渲染的网页代码编写

作者: 张林建 | 来源:发表于2023-09-26 16:47 被阅读0次

3 CSS3 盒模型
Search folder in Outlook Mac
在 Visual Studio Code 中构建一个C++开发环
第一节练习项目：动手做自己的网页
JQuery
JavaWeb之JSP
在 Windows 系统中安装 Pygame
把网页代码写入文件
html网页编写基本代码
web基础

当我们通过代码以html的格式发送邮件时，我们会发现在有些情况下，我们发送的html网页在Windows Outlook客户端上无法正常渲染，样式和布局可能并没有按照我们预想的方式进行渲染，例如当我们使用Flex布局时。

以下代码可以在iPhone上的Mail应用，Mac的Outlook客户端中正常展现，但是在Windows Outlook中会呈现错乱的布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="display: flex; flex-direction: column; box-shadow: 0 0 20px #55555555">
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #1196FF; padding: 10px 20px">
            <span style="color:white">XXXXXX</span>
            <span style="color:white; margin-top:10px">XXXXXXXXXXX</span>
        </div>
        <div style="display:flex; flex-direction: column; background-color: #fff; padding:20px 20px">
            <span>XXXXXXXX,</span>
            <br />
            <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
            <br />
            <span>XXXXX.</span>
            <span>XXXXXXXXXXXXXXX.</span>
        </div>
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #5B5B5B; padding: 10px 10px">
            <span style="color:#fff;font-size:10px">XXXXXXXXXXXX</span>
            <span style="color: #fff; font-size: 10px">XXXXXXXXX</span>
            <span style="color: #fff; font-size: 10px">XXXXXXXXXXXXXXXXXXXXX</span>
        </div>
    </div>
</body>
</html>

我们可以通过改为table方式的布局，使网页适应Windows Outlook客户端，与上面对应的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%; box-shadow: 0 0 20px #55555555">
        <tbody>
            <tr>
                <td style="background-color: #1196FF; padding: 10px 20px">
                    <p style="color: #fff;margin:0;padding:0 0; text-align:center">XXXXXX</p>
                    <p style="color: #fff; margin: 0; padding: 0 0; margin-top: 8px; font-size:18px; font-weight:bold; text-align: center">XXXXXXXXXXX</p>
                </td>
            </tr>
            <tr>
                <td style="background-color: #fff; padding: 20px 20px">
                    <p style="margin:0">XXXXXXXX,</p>
                    <p style="margin:0;margin-top:10px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p style="margin: 0; margin-top: 10px">XXXXXX.</p>
                    <p style="margin:0">XXXXXXXXXX.</p>
                </td>
            </tr>
            <tr>
                <td style="background-color: #5B5B5B; padding: 10px 10px">
                    <p style="color: #fff; font-size: 10px; margin: 0; padding: 0 0; text-align: center ">XXXXXXXXXXXXXXXX</p>
                    <p style="color: #fff; font-size: 10px; margin: 0; padding: 0 0; text-align: center">XXXXXXXXX</p>
                    <p style="color: #fff; font-size: 10px; margin: 0; padding: 0 0; text-align: center">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>