【发布时间】：2021-10-08 13:45:54
【问题描述】：
我正在尝试为 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:\Users\RhysPayne\Flourish PR Limited\FlourishTeam - Documents\Flourish Staff Folders\Rhys 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>
非常感谢任何帮助。
谢谢， 里斯
【问题讨论】：