Question

我从invest.com获得了一些HTML代码：

＆＃13;

<iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a></span></td></tr></table>

＆＃13;

输出如下图所示：

enter image description here

我想添加css来制作如下背景：圆角矩形，30不透明，浅绿色，边距可能为10像素

enter image description here

任何人都可以帮助我。我是html和css的新手。非常感谢你。

劳伦斯

Answer 1

只需添加带有彩色边框

的包裹div和css类.frame {}

.frame {
  display: inline-block;
  border: 30px solid ;
  border-color: rgba(200,255,200,0.6);
  border-radius: 30px;
  margin: 10px;
}

<div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a></span></td></tr></table></div>

<style>
    .frame {
      display: inline-block;
      border: 30px solid ;
      border-color: rgba(200,255,200,0.6);
      border-radius: 30px;
      margin: 10px;
    }
</style>
    <div class="frame"><iframe frameborder="0" height="380" width="230" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe><br /><table width="197"><tr><td><span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a></span></td></tr></table></div>

Answer 2

我建议你把iframe放到div中。在此示例中.iframe-container。所以HTML将如下所示：

<div class="iframe-container">
        <iframe frameborder="0" height="340" width="210" src="https://ssltools.forexprostools.com/currency-converter/index.php?from=17&to=12&force_lang=1"></iframe>
    </div>
    <br />
    <table width="197">
        <tr>
            <td>
                <span style="font-size: 11px;color: #333333;text-decoration: none;">The Currency Converter is powered by <a href="https://www.investing.com/" rel="nofollow" target="_blank" style="font-size: 11px;color: #06529D; font-weight: bold;" class="underline_link">Investing.com</a>
                </span>
            </td>
        </tr>
    </table>

请注意，我更改了iframe的with和height，因为它包含的格式与初始属性不匹配。如果您愿意，可以重置它。然后写一些CSS如下：

.iframe-container {
    display: inline-block;
    margin: 30px;
    padding: 30px;
    background: rgba(0, 255, 0, .3);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
iframe {
    margin: 0;
    padding: 0;
    background: white;
}

查看jsFiddle的结果。

Answer 3

抱歉！我知道这是我的问题，我多次尝试将这些HTML和CSS结合在一起，但是没有用。

我的目的只是想拥有一批代码＆＃34;粘贴到网站上。

感谢您的关注。

将简单的CSS添加到iframe / html

3 个答案: