0
HTML 전자 메일 서식 파일 디자인에 accordion을 사용할 수 있는지 알아야했습니다. HTML 이메일 템플릿에 많은 제약이 있다는 것을 알고 있으며, 원하는 경우에도 모든 CSS 트릭을 사용할 수는 없습니다. 전자 메일 템플리트에 간단한 아코디언을 추가하려고 시도했지만 이메일을 테스트 할 때 작동하지 않습니다. 이 코드는 'code pen'에서 발견되었으며 acid 계정에서 전자 메일로 테스트하려고하지만 작동하지 않습니다. 거기에 누군가가 자신의 이메일 템플릿에서 아코디언을 사용하고 작동했다 경우 전자 메일 서식 파일 디자인에서 Accordion을 HTML 및 CSS로만 사용할 수 있습니까
<!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>
입니다. 전자 메일 템플릿에서 의사 클래스는 작동하지 않으며 나머지 코드는 이메일 템플릿에 사용할 수 있습니다. –
어떤 OS 이메일 앱에서 HTML 콘텐츠를 확인 했습니까? 일반적으로 아코디언은 Gmail에서 작동하지 않습니다. –
@SatheeshKumar gmail은 이제 미디어 쿼리를 지원하므로 아코디언이 작동하며 실제로 Gmail 만 타겟팅 할 수있는 방법이 있습니다. 대부분의 장치를 대상으로하는 방법은 테스트의 문제입니다. – Syfer