gpt4 book ai didi

html - 我可以在仅使用 HTML 和 CSS 的电子邮件模板设计中使用 Accordion 吗

转载 作者:行者123 更新时间:2023-11-28 02:57:37 26 4
gpt4 key购买 nike

我需要知道我是否可以在我的 HTML 电子邮件模板设计中使用 Accordion 。我知道 HTML 电子邮件模板有很多限制,即使我们想也不能使用所有 CSS 技巧。我试图在我的电子邮件模板上添加一个简单的 Accordion ,但在我测试电子邮件时它不起作用。我在“代码笔”中找到的此代码,并尝试在 acid 帐户的电子邮件中对其进行测试,但它不起作用。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: 600px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: url(http://placekitten.com/g/600/300);
color: #FFF;
}
section {
padding: 0 20px;
}
#toggle:checked ~ #expand {
height: 250px;
}
#toggle:checked ~ label::before {
content: "-";
}
</style>
</head>
<body>
<main>
<h2>CSS Expand/Collapse Section</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">Hidden Kitten</label>
<div id="expand">
<section>
<p>mew</p>
</section>
</div>
<section>
<h3>Other content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
</p>
<p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
</section>
</main>
</body>
</html>

如果有人在他们的电子邮件模板中使用 Accordion 并使其工作,请帮助我。谢谢!

最佳答案

许多电子邮件客户端不支持伪类,因此,您必须相应地构建您的电子邮件模板。这是 list支持伪类的邮件客户端

关于html - 我可以在仅使用 HTML 和 CSS 的电子邮件模板设计中使用 Accordion 吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46363814/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com