html 松木导航反向堆栈垂直菜单

Posted 2021-05-11

<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
  <td style="padding: 0 20px;">
    <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td class="col pb-sm-2" width="200" style="padding: 0 10px;">
          <img src="http://placehold.it/160x160?text=LOGO" class="align-sm-center" alt="Logo" width="80" style="border-radius: 50%; max-width: 80px; width: 100%;">
        </td>
        <td class="col" width="420" style="padding: 0 10px; vertical-align: middle;">
          <table align="right" class="nav nav-sm-vertical align-sm-center text-sm-center full-width-sm" cellpadding="0" cellspacing="0" role="presentation">
            <tr class="full-width-sm">
              <td class="nav-item stack-sm-last" style="padding-right: 30px;">
                <a href="http://example.com" style="color: #000000; text-decoration: none;">News</a>
              </td>
              <td class="nav-item stack-sm-last" style="padding-right: 30px;">
                <a href="http://example.com" style="color: #000000; text-decoration: none;">Services</a>
              </td>
              <td class="nav-item stack-sm-first" style="padding-right: 30px;">
                <a href="http://example.com" style="color: #000000; text-decoration: none;">Work</a>
              </td>
              <td class="nav-item stack-sm-top">
                <a href="http://example.com" style="color: #000000; text-decoration: none;">Store</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>