生成样式元素以供外部站点使用

时间:2017-12-11 22:01:57

标签: html css

在我们的一个Web应用程序中,我们需要允许用户生成一个“按钮”,他们可以将这些按钮放在他们将用户发送到我们应用程序的网站上。这个想法听起来很简单,但我想的越多,我不确定实现这个目标的最佳路线是什么。我想出的一个选择是在我们服务器上托管的图像周围生成一个超链接,如:

<a href="/location/on/our/application">
    <img src="//ourapp.com/images/button-image.jpg" />
</a>

我们的应用程序使用bootstrap,我们真正想要的只是一个基本的引导按钮。类似的东西:

<a class="btn btn-primary" href="/location/on/our/application">To Our App</a>

但是,当客户端站点没有使用bootstrap框架时,这显然不会产生预期的效果。

我总是避开iframe,但这可能是一个可以接受使用的实例吗?还有其他选择我忽略了吗?

1 个答案:

答案 0 :(得分:0)

如果您选择沿着CSS按钮的路线走,我建议使用内联样式。考虑到您不知道外部网站正在使用哪些样式表,您需要捆绑自己的样式,并且内联样式是完美的。他们的第二高级别 specificity ,仅次于 !important declaration 。重要的是要注意的是,事实上你可以将!important与内联样式结合起来:

<div style="display: block !important;"></div>

这不能以任何方式覆盖,并保证按预期显示...假设外部网站开发人员遵守这些规则,并且不修改您提供给他们的HTML / CSS(您可以& #39; t'确保)。

因此,图像将是最佳解决方案,因为不能是任何“失真”。由外部网站的所有者;要么完全取代图像,要么完全取而代之。

最终,除了品牌形象保护之外,您真正需要担心的是 href attribute 仍然指向您的网站(以及通过任何必需的 {{ 3}} )。只要该信息有效,就转化率或您可能感兴趣的任何其他指标而言,该链接与完整格式的按钮一样有效。

希望这有帮助! :)