Question

嗨，我正在努力想出一个响应式电子邮件广告系列，以便顶部的导航栏在移动网站中移动到底部。我试过但似乎无法搞清楚。我想要实现的例子是example

我正在使用HTML和CSS。

这是桌面视图中的导航栏代码，

.nav { 
font-family: Arial, sans-serif; 
font-size: 14px; 
color: #272727; 
font-weight: normal; 
line-height: 14px; 
mso-line-height-rule: exactly;
text-align: center; 
vertical-align: top; 
}

.nav a { color: #272727; text-decoration: none; }

HTML：

     <table border="0" cellspacing="0" cellpadding="0" align="right" class="deviceWidth">
      <tr>
           <td>
           <!-- Start: Nav 1 -->
           <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">                            
             <tr>
             <td align="center" valign="top" style="padding: 45px 0 15px 20px;" class="nav navPaddingForMobile whiteBackgroundForMobile">
                <a href="http://www.example.com">HOME</a>
             </td>
             </tr>
           </table>
         <!-- End: Nav 1 -->

 <!--[if (gte mso 9)|(IE)]></td><td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><![endif]-->


     <!-- Start: Nav 2 -->
     <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
     <tr>
       <td align="center" style="padding: 45px 0 15px 20px;" class="nav navPaddingForMobile whiteBackgroundForMobile">
        <a href="http://www.example.com">FAVOURITE</a>
       </td>
     </tr>
    </table>
   <!-- End: Nav 2 -->

<!--[if (gte mso 9)|(IE)]></td><td style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><![endif]-->

    <!-- Start: Nav 3 -->
    <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
     <tr>
     <td align="center" valign="top" style="padding: 45px 0 15px 20px;" class="nav navPaddingForMobile whiteBackgroundForMobile">
       <a href="http://www.example.com">FAQ</a>
    </td>
     </tr>
    </table>
  <!-- End: Nav 3 -->
  </td>
</tr>
</table>

Answer 1

使用Position + Float +媒体查询：

＆＃13;

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-family: tahoma;
    margin: 0;
    padding: 0;
}
header,main, nav, aside, footer {
    text-align: center;
    padding: 15px;
    color: #fff
}
header { background: #0C65A7 }
main { background: #16A2C5 }
nav { background: #124B78 }
aside { background: #5275AD }
footer { background: #7CCCE3 }

.container {
    position: relative;
    overflow: hidden;
    padding-top: 45px
}
nav {
    position: absolute;
    width: 100%;
    top: 0
}
main, aside {
    float: left;
    height: calc(100vh - 145px)
}
main { width: 70% }
aside { width: 30% }
@media(max-width: 400px) {
    .container { padding: 0 }
    main, aside { width: 100%; height: 250px }
    nav { position: static; clear: both }
}

＆＃13;

<header>Header</header>
<div class="container">
    <main>Main</main>
    <nav>Nav</nav>
    <aside>Aside</aside>
</div>
<footer>Footer</footer>

＆＃13;

电子邮件营销活动 - 移动视图中的导航栏移至底部

1 个答案: