Question

在此代码中 -

<style>
#boxx{
box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
border: 6px solid #fff;
background-color: #0e5b93;
min-height: 345px;
max-width: 745 px;
padding-left: 15px;
padding-right: 15px;
}
#ter {
text-align: center;
}

</style>
<div id="boxx">
<table>
<tr>
<td width="500px">
<p style="font-size: 28px; color: #FFF; padding-top: 27px;">Start earning money with your own blog like this one?</p>
<br>
<p style="font-size: 18px; color: #FFF;">This website was created with Thrive Themes and WordPress. Using the suite of tools provided by Thrive Themes is the fastest way for you to create your own website or blog that is <b>fully optimized for maximum conversions</b>. Click the button to get started.</p>

</td>

<td width="251">
<span id="ter" style="width:500px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';"><a href="https://www.goog.ecom">Click Here to Get Thrive Themes</a></span>
</td>
</tr>
</table>
</div>

我想要“点击此处获取兴趣主题”框，看起来就像下面这个网页上的方框一样 -

http://zacjohnson.com/how-will-you-stand-out-from-the-crowd/

我需要做出哪些改变？

Answer 1

我已经修改了您的HTML和CSS，以复制您为自己发布的网站中的按钮。

您可以调整CSS以满足您的确切需求

＆＃13;

#boxx {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border: 6px solid #fff;
  background-color: #0e5b93;
  min-height: 345px;
  max-width: 745 px;
  padding-left: 15px;
  padding-right: 15px;
}
a {
  color: white;
  text-decoration: none;
}
button {
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
  border: none;
  background-color: #124463;
  text-align: center;
  -webkit-box-shadow: 0px 2px 0px black;
  -moz-box-shadow: 0px 2px 0px black;
  box-shadow: 0px 2px 0px black;
  width: 150px;
  height:80px;
  font-weight: 500;
  margin-top:150px;
  margin-left:20px;
  float: right;
  font-size:14px;
}
button:hover {
  opacity: 0.8;
}

＆＃13;

<div id="boxx">
  <table>
    <tr>
      <td width="500px">
        <p style="font-size: 28px; color: #FFF; padding-top: 27px;">Start earning money with your own blog like this one?</p>

        <p style="font-size: 18px; color: #FFF;">This website was created with Thrive Themes and WordPress. Using the suite of tools provided by Thrive Themes is the fastest way for you to create your own website or blog that is <b>fully optimized for maximum conversions</b>. Click the button
          to get started.</p>
      </td>
      
      <td>
        <button id="ter"><a href="https://www.goog.ecom">Click Here to Get Thrive Themes</a>
        </button>
      </td>
    </tr>
  </table>
</div>

＆＃13;

HTML Box - 让它看起来像另一个网站

1 个答案: