Question

我的代码在下方，底部有缩略图，我希望下载链接和文本显示在缩略图下方，并且缩略图显示在标题/横幅下方黑色背景的左上角。有人可以帮忙吗？

<body 
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br>
<table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
<tr>
  <td height="70" colspan="3" align="center" valign="middle" bgcolor="#000000">
    <img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg" </h1></td>
</tr>
<tr>
  <td colspan="3">
    <div style="text-align: center; width: 100%">
              <a href="https://facebook.com/PhotographyBok" target="_"><input 
type="button" value="Timeline"/></a>
      <a href="https://500px.com/marcus_bok" target="_"><input 
type="button" value="Portfolio"/></a>
      <a href="https://facebook.com/PhotographyBok/app/251458316228/" target="_"><input 
type="button" value="Shop Now"/></a>
      <a href="https://www.facebook.com/PhotographyBok/app/128953167177144/" target="_"><input 
type="button" value="Downloads"/></a>
      <a href="https://www.facebook.com/PhotographyBok/info/" target="_"><input 
type="button" value="About Me"/></a>
<div class="fb-like" data-href="https://facebook.com/photographybok" data-layout="button" data-action="like" data-show-faces="true" data-share="true">
                       </div>
                       </tr>
                       <td height="568" border="4" align="centre" valign="middle" bgcolor="#000000">
                          <img align="left" src="https://farm6.staticflickr.com/5685/22966400834_ca5b8b1cae_h.jpg" class="img-with-text" alt="Texture Download" width="204" height="136"> <a href="https://www.dropbox.com/s/2zikce9elhkg2qi/12333083_10153200931056625_1694988016_o.jpg?dl=0">Download Photoshop Texture</a>
                       </td>
</td>

Answer 1

HTML是一种标记语言，每个标记都用<>符号表示，并以</>符号关闭。你有很多不正确的标签。我查看了代码，关闭（或删除）未关闭的代码。

所以现在你有一个包含4行的表，其中第四个是缩略图下方的文本，带有链接。您可以使用表格单元格（<td>）放置更多内容，但是根据Flignats的建议，您应该学习一些基本的HTML / CSS布局并替换当前的表格布局。

如果你进入它，下面是一些关于你的代码的补充说明：

使用有意义的缩进
您正在混合内联CSS样式和HTML属性，而是使用CSS文件
脚本通常放在结束体标记之前，因此它们不会干扰加载元素

<body>
  <div id="fb-root"></div>
  <br>
  <table width="768" border="0" align="center" cellpadding="4" cellspacing="2" style="text-align: center">
    <tr>
      <td height="70" colspan="3" align="center" valign="middle" bgcolor="#000000">
        <img src="https://farm1.staticflickr.com/756/23511757696_469b593243_b.jpg">
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <div style="text-align: center; width: 100%">
          <a href="https://facebook.com/PhotographyBok" target="_">
            <input type="button" value="Timeline" />
          </a>
          <a href="https://500px.com/marcus_bok" target="_">
            <input type="button" value="Portfolio" />
          </a>
          <a href="https://facebook.com/PhotographyBok/app/251458316228/" target="_">
            <input type="button" value="Shop Now" />
          </a>
          <a href="https://www.facebook.com/PhotographyBok/app/128953167177144/" target="_">
            <input type="button" value="Downloads" />
          </a>
          <a href="https://www.facebook.com/PhotographyBok/info/" target="_">
            <input type="button" value="About Me" />
          </a>
          <div class="fb-like" data-href="https://facebook.com/photographybok" data-layout="button" data-action="like" data-show-faces="true" data-share="true">
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td height="136" border="4" align="centre" valign="middle" bgcolor="#000000">
        <img align="left" src="https://farm6.staticflickr.com/5685/22966400834_ca5b8b1cae_h.jpg" class="img-with-text" alt="Texture Download" width="204" height="136">
      </td>
    </tr>
    <tr border="none" align="left">
      <td>
        <a href="https://www.dropbox.com/s/2zikce9elhkg2qi/12333083_10153200931056625_1694988016_o.jpg?dl=0">Download Photoshop Texture</a>
      </td>
    </tr>
  </table>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>
</body>

将文本与缩略图下的链接对齐，并将缩略图对齐在左上角

1 个答案: