У меня мало опыта в HTML, поэтому я прошу прощения, если на этот вопрос уже был дан ответ.
Я хочу отправить электронное письмо с несколькими очень длинными разделами, поэтому я хочу, чтобы они были разборными.Я не знаю много html / css, но я смог собрать что-то, что разрушает разделы.Тем не менее, всякий раз, когда я конвертирую его во встроенный CSS, я больше не могу просматривать отображаемые разделы.
Я открыт для других идей по разборным разделам, однако я не могу использовать обычный CSS, что-то, что попадает под,любой javascript и все, что находится во внешних документах.
Пример кода ниже
<head>
<style>
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: auto;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
}
p {
font-size: 16px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #444;
}
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%);
}
#expand0 {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: #FFF;
color: #000;
}
section {
padding: 0 20px;
}
#toggle0:checked~#expand0 {
height: 85px;
}
#toggle0:checked~label::before {
content: "-";
}
</style>
</head>
<main>
<input id="toggle0" type="checkbox" checked>
<label for="toggle0">Example</label>
<div id="expand0">
<section>
<p><a href="https://coubsecure-s.akamaihd.net/get/b179/p/coub/simple/cw_timeline_pic/3022e666160/33576a2d011ddb7a1b1a2/big_1499702421_image.jpg">Hello There</a></p>
<p><a href="https://thumbs.gfycat.com/ClosedLastAtlanticsharpnosepuffer-poster.jpg">General Kenobi</a></p>
</section>
</div>
</main>
Встроенный пример
<main style="background-color:#EEE;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;width:auto;margin-top:20px;margin-bottom:20px;margin-right:auto;margin-left:auto;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;box-shadow:0 3px 5px rgba(0, 0, 0, 0.3);" >
<input id="toggle0" type="checkbox" checked style="display:none;visibility:hidden;" >
<label for="toggle0" style="display:block;padding-top:0.5em;padding-bottom:0.5em;padding-right:0.5em;padding-left:0.5em;text-align:center;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;color:#444;" >Example</label>
<div id="expand0" style="height:0px;overflow:hidden;transition:height 0.5s;background-color:#FFF;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;color:#000;" >
<section style="padding-top:0;padding-bottom:0;padding-right:20px;padding-left:20px;" >
<p style="font-size:16px;" ><a href="https://coubsecure-s.akamaihd.net/get/b179/p/coub/simple/cw_timeline_pic/3022e666160/33576a2d011ddb7a1b1a2/big_1499702421_image.jpg">Hello There</a></p>
<p style="font-size:16px;" ><a href="https://thumbs.gfycat.com/ClosedLastAtlanticsharpnosepuffer-poster.jpg">General Kenobi</a></p>
</section>
</div>
</main>