Question

我正在学习编写响应式电子邮件模板的代码。目前我所拥有的是：https://jsfiddle.net/q12yg2z6/

<tr class="main_nav">
    <td id="mobile_nav" width="600">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
                </td>
            </tr>
        </table>
    </td>
</tr>

正如您所看到的，桌面上的顶级导航将在移动设备上堆叠在底部。但是现在它出现在主要的cta和下两个栏目之间。如何让它出现在页脚。我尝试使用我的代码，但无法找到正确的方法。

Answer 1

使用它：

Template.menu.rendered = function(){
setTimeout(function() {
import '/imports/turn.min.js';

    $(window).ready(function() {
        $('#magazine').turn({
                            display: 'double',
                            acceleration: true,
                            gradients: !$.isTouch,
                            elevation:50,
                            when: {
                                turned: function(e, page) {
                                    // console.log('Current view: ', $(this).turn('view'));
                                }
                            }
                        });
    });


    $(window).bind('keydown', function(e){

        if (e.keyCode==37)
            $('#magazine').turn('previous');
        else if (e.keyCode==39)
            $('#magazine').turn('next');

    });
}, 1000);
};

Answer 2

你有：

@media only screen and (max-width: 500px){
tr[class="main_nav"] {
    display: table-footer-group;
}
tr[class=main_cta] {
    display: table-header-group;
}
}

在你的HTML中：

<tr class="main_nav"></tr>
<tr class="main_cta"></tr>
<tr height="45"></tr>
<tr></tr>

尝试声明另外两个表行table-header-group。

Answer 3

H，

以错误顺序堆叠的代码位于第62行

 tr[class="main_cta"] {
        display: table-header-group;
    }

评论和/或删除后，堆叠工作正常。一旦你删除你的导航搞砸了。它的宽度很小。

之后对以下内容做同样的事情：

tr[class="main_nav"] {
display: table-footer-group;

}

之后应该没问题。

干杯

HTML电子邮件，导航显示在移动设备的底部

3 个答案: