Question

我正在尝试创建一个html电子邮件简报并实现这种外观。

到目前为止，我在一个表格中有两张图片，每张图片都在其自己的表格数据中。

<table align="center"> 
        <tr>
            <td width="250" bgcolor="#ffffff">
                <img src="PickYourSale-wrinkles-v2.jpg" width="249" height="249">
            </td>

            <td width="250" bgcolor="#ffffff">
                <img src="PickYourSale-NEW-v2.jpg" width="249" height="249">
            </td>
        </tr>
</table>

我正在试图弄清楚如何获得与此图像完全相同的号召性用语按钮。谁知道怎么做？

jsfiddle - https://jsfiddle.net/sd128bbv/

Answer 1

您可以使用CSS轻松实现此目的，并为按钮添加额外的行。

看一下这个片段。

＆＃13;

table#newletter {
  font-family: sans-serif;
}
tr.buttons {
  text-align: center;
}
a.button {
  padding: 10px;
  border-radius: 4px;
  background: indigo;
  color: white;
  font-weight: bold;
  text-decoration: underline;
}

＆＃13;

<table id="newsletter" align="center">
  <tr>
    <td width="250" bgcolor="#ffffff">
      <img src="http://cdn2-www.thefashionspot.com/assets/uploads/gallery/earth-day-beauty-awards-2015/john-masters-organics-sea-mist-sea-salt-spray.jpg" width="249" height="249">
    </td>
    <td width="250" bgcolor="#ffffff">
      <img src="http://healthfulmama.com/wp-content/uploads/2012/03/bottles.jpg" width="249" height="249">
    </td>
  </tr>
  <tr class="buttons">
    <td><a class="button" href="http://www.google.com" title="Sample button link">Clickie ></a>
    </td>
    <td><a class="button" href="http://www.google.com" title="Sample button link">Clickie ></a>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

Yoy可以这样试试

 <table align="center"> 
    <tr>
        <td width="250" bgcolor="#ffffff">
            <img src="PickYourSale-wrinkles-v2.jpg" width="249" height="249" alt="example">
        </td>

        <td width="250" bgcolor="#ffffff">
            <img src="PickYourSale-NEW-v2.jpg" width="249" height="249" alt="example">
        </td>
    </tr>   
    <tr>                  
        <td width="250"  style = "text-align:center">
           <button>click me</button>
        </td>                    
        <td width="250"  style = "text-align:center">
            <button>click me</button>
        </td>  
    </tr>                 
</table>

如何获取图像下的号召性用语按钮并居中？

2 个答案: