0
私は電子メールに3つの画像が含まれたカルーセルに取り組んでいます。出力については、一度に1つの画像を3つの点で表示し、各画像を切り替える必要があります。純粋なhtmlとcssを使用してOutlookで一貫性のない電子メールカルーセルを作成する
電子メールの制約がJavascriptと互換性がないため。私はhtmlとcssに固執する必要があります。以下のコードを参照してください：
<html>
<head>
<title>Slider</title>
<style>
.slider-holder
{
width: 560px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2400px;
background-color: black;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
</style>
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<img src="rsz_test.jpg" class="slider-image" />
<img src="rsz_1test.jpg" class="slider-image" />
<img src="rsz_test.jpg" class="slider-image" />
</div>
<div class="button-holder">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>
</div>
</body>
</html>
Outlookの電子メールアドレスに送信すると問題が発生します。出力はすべての画像を一度に表示する傾向があります。 私はdoctypeを取り出しました
一貫性を保つための指針を持っている人には本当に感謝しています。