个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在使用 Google Apps 脚本(来自电子表格)，并且我创建了几封包含表单超链接等的电子邮件。我想让这些链接看起来像按钮。我是编码的新手，所以解决方案不能太复杂。所有论坛都建议使用 CSS。有没有办法在 Google Apps 脚本中嵌入 CSS 代码？
例如，我想使用 this site (单击右下角的“获取代码”)生成 CSS 代码，然后通过将它们分配给 CSS 代码创建的类来格式化我的超链接。但我不知道在 Google Apps 脚本中创建 CSS 类的正确方法。
这是我的电子邮件的消息部分:
var message = '<HTML>';
message += "Hi, please click this button.";
message += '<br><br>';
message += '<a href="www.google.com" class="button"/>google</a>';
message += '<br><br></HTML>';
这是来自生成器网站的 CSS 代码:
.button{
text-decoration:none;
text-align:center;
padding:11px 32px;
border:solid 1px #004F72;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#E5FFFF;
background-color:#3BA4C7;
background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
最佳答案
既然你想在电子邮件中设置按钮的样式，你应该使用内联样式。这通常不是您想要的样式处理方式，但由于某些电子邮件客户端的限制，这是您的样式将得到尊重的一种方式。 (例如，Mozilla Thunderbird 会遵守内部样式表，但 Gmail 的网络邮件不会。)
为了简化这一点，为什么不将按钮创建移动到一个函数中，然后您可以在构建邮件时调用该函数？ function htmlMailButton()下面是对来自 this blog post 的 Awesome Email Button 的改编。 .
function sendButtonMail() {
var recipient = Session.getActiveUser().getEmail();
var message = '<body>';
message += "Hi, please click this button.";
message = htmlMailButton("Google","www.google.com");
message += '</body>';
GmailApp.sendEmail(recipient, 'Button', '', {htmlBody:message});
}
// Return HTML representing a clickable "button" labled with buttonLabel, going to link.
// Inspired by http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
function htmlMailButton( buttonLabel, link ) {
var button = '<table cellspacing="0" cellpadding="0"><tr>'
+ '<td align="center" width="300" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">'
+ '<a href="##LINK##" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">##BUTTONLABEL##</a>'
+ '</td> </tr> </table>';
return button.replace('##BUTTONLABEL##',buttonLabel)
.replace('##LINK##', link);
}
Awesome Email Button 是一个单单元格表格，这使得它在许多电子邮件客户端和 Web 服务中都非常可靠。博客中提供了调整大小的说明。背景颜色由 <td> 的样式控制(表格数据)标签，而文字颜色在<a>的风格。
编辑:有一些方便的工具，例如 MailChimp 的 CSS Inliner Tool可以帮助您从 CSS 转换 <style>内联样式的标签。如果您更喜欢通过 CSS 开发电子邮件正文的外观，这将很有帮助。参见 How do I use Google Apps Script to change a CSS page to one with inline styles? .
关于html - 如何在电子邮件中使用 CSS(特别是设计超链接按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20570361/
24
4
0
我使用下拉菜单提供一些不同的链接，但我希望这些链接在同一选项卡中打开，而不是在新选项卡中打开。这是我找到的代码，但我对 Javascript 非常缺乏知识 var urlmenu = docume
我对 javascript 不太了解。但我需要一个垂直菜单上的下拉菜单，它是纯 JavaScript，所以我从 W3 复制/粘贴脚本:https://www.w3schools.com/howto/t
我已经坐了 4 个小时，试图让我的导航显示下 zipper 接垂直，但它继续水平显示它们。我无法弄清楚为什么会发生这种情况或如何解决它。 如果有人能告诉我我做错了什么，我将不胜感激。我有一个潜移默化的
我正在尝试创建选项卡式 Accordion 样式下拉菜单。我使用 jQuery 有一段时间了，但无法使事件状态达到 100%。 我很确定这是我搞砸的 JS。 $('.service-button').
对于那些从未访问过 Dropbox 的人，这里是链接 https://www.dropbox.com/ 查看“登录”的下拉菜单链接。我如何创建这样的下 zipper 接？ 最佳答案 这是 fiddle
我正在制作一个 Liferay 主题，但我在尝试设计导航菜单的样式时遇到了很多麻烦。我已经为那些没有像这样下拉的人改变了导航链接上的经典主题悬停功能: .aui #navigation .nav li
如果您将鼠标悬停在 li 上，则会出现一个下拉菜单。如果您将指针向下移至悬停时出现的 ul，我希望链接仍然带有下划线，直到您将箭头从 ul 或链接移开。这样你就知道当菜单下拉时你悬停在哪个菜单上。 知
我有一个带有多个下拉菜单的导航栏。因此，当我单击第一个链接时，它会打开下拉菜单，但是当我单击第二个链接时，第一个下拉菜单不会关闭。 (所以如果用户点击第二个链接我想关闭下拉菜单) // main.js
我正在尝试制作一个导航下拉菜单(使用 Bootstrap 3)，其中链接文本在同一行上有多个不同的对齐方式。 在下面的代码中，下拉列表 A 中的链接在 HTML 中有空格字符来对齐它们，但是空白被忽略
我希望有人能帮我解决这个 Bootstrap 问题，因为我很困惑。 有人要求我在底部垂直对齐图像和其中包含图像的链接。 我面临的问题是他们还希望链接在链接/图像组合上具有 pull-right，这会杀
我正在构建一个 Rails 应用程序，并希望指向我的类的每个实例的“显示”页面的链接显示在“索引”页面的下拉列表中。我目前正在使用带有 options_from_collection_for_sele
我有以下 Bootstrap3 导航菜单 ( fiddle here )。我想设置“突出显示”项及其子链接与下拉列表 1 和 2 链接不同的链接文本(和悬停)的样式。我还希望能够以不同于 Highli
我对导航栏中的下拉菜单有疑问。对于普通的导航链接(无下拉菜单)，我将菜单文本放在 H3 中，但是当我尝试对下 zipper 接执行相同操作时，箭头不在标题旁边，而是在标题下方。我决定用 span 替换
我是一名优秀的程序员,十分优秀！