是的，我帮你。请遵循此代码。或者把你的设计样品寄给我。感谢
https://i.stack.imgur.com/mQFcK.jpg
我正在尝试为outlook创建一个电子邮件签名。我已经创建了上面链接的设计(我已经审查了所有的文本)。我想将图像转换为html文档，这样我就可以在图像上添加按钮，然后将html代码放入outlook中进行签名。右边的所有审查信息都应该有自己的单独按钮，加上底部的两个审查部分和4个社交媒体链接(总共9个按钮)。
我已经开始做一些东西，但它不起作用，我甚至不知道我是否朝着正确的方向前进。请帮我一下好吗？我做的事对吗？请参阅以下代码：
<!DOCTYPE html>
<html>
<head>
<!--link href="styles.css" rel="stylesheet type="text"/-->
<style>
.container {
position: relative;
width: 100%;
max-width: 800px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 60%;
left: 6%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 0;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn1 {
position: absolute;
top: 58.9%;
left: 12%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn2 {
position: absolute;
top: 58.9%;
left: 16%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn3 {
position: absolute;
top: 58.9%;
left: 20%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn4 {
position: absolute;
top: 58.9%;
left: 24%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btna {
position: absolute;
top: 65%;
left: 12%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btne {
position: absolute;
top: 70%;
left: 12%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btnp {
position: absolute;
top: 75%;
left: 12%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btnl {
position: absolute;
top: 80%;
left: 12%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btnw {
position: absolute;
top: 85%;
left: 12%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
opacity: 1;
color: white;
font-size: 16px;
padding: 8px 8px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src = "C:UsersRhysPayneFlourish PR LimitedFlourishTeam - DocumentsFlourish Staff FoldersRhys Payne/Email Signature - Card 1.jpg"/>
<button class="btn" onclick="alert('Hello world!')"> </button>
<button class="btn1" onclick="alert('Hello world!')"> </button>
<button class="btn2" onclick="alert('Hello world!')"> </button>
<button class="btn3" onclick="alert('Hello world!')"> </button>
<button class="btn4" onclick="alert('Hello world!')"> </button>
<button class="btna" onclick="alert('Hello world!')"> </button>
<button class="btne" onclick="alert('Hello world!')"> </button>
<button class="btnp" onclick="alert('Hello world!')"> </button>
<button class="btnl" onclick="alert('Hello world!')"> </button>
<button class="btnw" onclick="alert('Hello world!')"> </button>
</body>
</html>
非常感谢您的帮助。
谢谢，Rhys
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
</style>
<table width="360" border="0" cellspacing="0" cellpadding="0" border-spacing='0' style="width: 360px; font-family: 'Roboto', sans-serif; mso-line-height-rule:exactly; border-collapse:collapse; -webkit-text-size-adjust:none;">
<tr>
<td width="360" style="padding-bottom:5px;">
<table border="0" cellspacing="0" cellpadding="0" border-spacing='0'>
<tr>
<td width="130" valign="middle" style="text-align:left;">
<a href="https://www.pmaclermont.com/" target="_blank"><img moz-do-not-send="true" border="0" width="120" height="78" src="https://i.ibb.co/TqdX2r3/logo.png" alt="logo"></a>
</td>
<td width="230" style="padding-left: 15px; border-left:1px solid #20ae4b;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220" style="padding-bottom:8px;" border="0" cellspacing="0" cellpadding="0">
<p style="margin: 0;">
<span style="font-family: 'Roboto', sans-serif; font-size: 12pt; color: #20ae4b; font-weight:bold;">Clay Brian | </span><span style="font-family: 'Roboto', sans-serif; font-size: 12pt; color: #000000;">Owner</span>
</p>
</td>
</tr>
<tr>
<td width="230" style="padding-bottom:8px;" border="0" cellspacing="0" cellpadding="0">
<p style="margin: 0;">
<span style="font-family: 'Roboto', sans-serif; font-size: 9pt; color: #2f455c;"> Rainbows and Butterflies, Inc.<br>d/b/a Premier Martial Arts- Clermont, FL</span>
</p>
</td>
</tr>
<tr>
<td width="230" style="font-size:9pt;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="230" style="line-height:14pt;">
<p style="margin:0;">
<img moz-do-not-send="true" border="0" width="13" height="13" src="https://i.ibb.co/7bkdnfP/cell.png" alt="cell" style="vertical-align:middle;"> <a href="tel:4074530644" style="font-family: 'Roboto', sans-serif; font-size: 9pt; color: #2f455c; text-decoration: none;">(407) 453-0644</a>
</p>
<p style="margin:0;">
<img moz-do-not-send="true" border="0" width="13" height="13" src="https://i.ibb.co/Rpm1Wcy/website.png" alt="website" style="vertical-align:middle;"> <a href="https://www.pmaclermont.com/" style="font-family: 'Roboto', sans-serif; font-size: 9pt; color: #2f455c; text-decoration: none;">www.pmaclermont.com</a>
</p>
</td>
</tr>
<tr>
<td width="230" valign="bottom" style="vertical-align:bottom; text-align:left; padding-top: 7px;">
<a href="https://www.instagram.com/pmaclermont/" target="_blank"><img moz-do-not-send="true" border="0" width="22" height="22" src="https://i.ibb.co/F8Vc4n0/instagram.png" alt="instagram"></a> <a href="http://facebook.com/premiermartialartsclermont" target="_blank"><img moz-do-not-send="true" border="0" width="22" height="22" src="https://i.ibb.co/D7TRtFw/facebook.png" alt="facebook"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>