使用纯html和css生成电子邮件轮播在Outlook中不一致(Using pure html and css to produce a email carousel inconsistent in outlook)
我正在为包含3张图片的电子邮件转盘工作。 对于输出，我希望它每次呈现1个图像，每个图像切换3个点。
由于电子邮件与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电子邮件地址时，问题就出现了。 输出倾向于一次显示所有图像。 我已经拿出了文档类型
真正感谢任何人有任何指示，保持一致。
I am working on a carousel with 3 images included for an email. For the output, I want it to present 1 image at a time with 3 dots that toggle through each image.
Due to the constraint of emails not being compatible with Javascript. I have to stick to html and css. Please see code below:
<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>The problem comes when I send it to outlook email addresses. The output tends to show all the images at once. I have taken out the doctype
Truly appreciated to anyone that has any pointers in keeping it consistent.
最满意答案
我无法测试这个，但是我通过一个电子邮件内联工具Premailer运行了你的代码。 尝试一下！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Slider</title> </head> <body> <style type="text/css"> #slider-image-1:target ~ .image-holder { left: 0px; } #slider-image-2:target ~ .image-holder { left: -800px; } #slider-image-3:target ~ .image-holder { left: -1600px; } </style> <div class="slider-holder" style="background: yellow; height: 400px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; text-align: center; width: 560px" align="center"> <span id="slider-image-1"></span> <span id="slider-image-2"></span> <span id="slider-image-3"></span> <div class="image-holder" style="-moz-transition: left 2s; -o-transition: left 2s; -webkit-transition: left 2s; background: black; clear: both; height: 400px; position: relative; transition: left 2s; width: 2400px"> <img src="rsz_test.jpg" class="slider-image" style="float: left; margin: 0px; padding: 0px; position: relative" align="left"> <img src="rsz_1test.jpg" class="slider-image" style="float: left; margin: 0px; padding: 0px; position: relative" align="left"> <img src="rsz_test.jpg" class="slider-image" style="float: left; margin: 0px; padding: 0px; position: relative" align="left"> </div> <div class="button-holder" style="position: relative; top: -20px"> <a href="#slider-image-1" class="slider-change" style="background: brown; border-radius: 5px; display: inline-block; height: 10px; width: 10px"></a> <a href="#slider-image-2" class="slider-change" style="background: brown; border-radius: 5px; display: inline-block; height: 10px; width: 10px"></a> <a href="#slider-image-3" class="slider-change" style="background: brown; border-radius: 5px; display: inline-block; height: 10px; width: 10px"></a> </div> </div> </body> </html>I cannot test this, but I ran your code through Premailer, an email inliner tool. Try it!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Slider</title> </head> <body> <style type="text/css"> #slider-image-1:target ~ .image-holder { left: 0px; } #slider-image-2:target ~ .image-holder { left: -800px; } #slider-image-3:target ~ .image-holder { left: -1600px; } </style> <div class="slider-holder" style="background: yellow; height: 400px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; text-align: center; width: 560px" align="center"> <span id="slider-image-1"></span> <span id="slider-image-2"></span> <span id="slider-image-3"></span> <div class="image-holder" style="-moz-transition: left 2s; -o-transition: left 2s; -webkit-transition: left 2s; background: black; clear: both; height: 400px; position: relative; transition: left 2s; width: 2400px"> <img src="rsz_test.jpg" class="slider-image" style="float: left; margin: 0px; padding: 0px; position: relative" align="left"> <img src="rsz_1test.jpg" class="slider-image" style="float: left; margin: 0px; padding: 0px; position: relative" align="left"> <img src="rsz_test.jpg" class="slider-image" style="float: left; margin: 0px; padding: 0px; position: relative" align="left"> </div> <div class="button-holder" style="position: relative; top: -20px"> <a href="#slider-image-1" class="slider-change" style="background: brown; border-radius: 5px; display: inline-block; height: 10px; width: 10px"></a> <a href="#slider-image-2" class="slider-change" style="background: brown; border-radius: 5px; display: inline-block; height: 10px; width: 10px"></a> <a href="#slider-image-3" class="slider-change" style="background: brown; border-radius: 5px; display: inline-block; height: 10px; width: 10px"></a> </div> </div> </body> </html>更多推荐
发布评论