Html 围绕adsense的响应式广告标签_Html_Css

Html 围绕adsense的响应式广告标签

html css

Html 围绕adsense的响应式广告标签,html,css,Html,Css,我正试图将我的网站列入AdBlock的白名单。为了做到这一点，我需要用标签封装我所有的广告。我可以添加标签，但它没有反应，有时广告会重叠。请问有什么更好的方法可以围绕adsense广告创建标签 <div style="position: relative;"> <span class="Ad-label">Advertisement</span> <section> <div class="row">

我正试图将我的网站列入AdBlock的白名单。为了做到这一点，我需要用标签封装我所有的广告。我可以添加标签，但它没有反应，有时广告会重叠。请问有什么更好的方法可以围绕adsense广告创建标签

<div style="position: relative;">
    <span class="Ad-label">Advertisement</span>
    <section>
        <div class="row">
            <div class="row-sm-height">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>

.Ad-label {
    color: #444;
    background: #ddd;
    font-family: arial;
    padding: 3px 10px;
    font-size: 10px;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    left: 13%;
    top: 0px;
    white-space: nowrap;
    font-size: 11px;
    display: inline-block;
}

[1]


广告
（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；
.广告标签{
颜色：#444；
背景：ddd；
字体系列：arial；
填充：3x10px；
字体大小：10px；
-webkit变换：旋转（90度）；
-webkit变换原点：左上；
-moz变换：旋转（90度）；
-moz变换原点：左上；
-ms变换：旋转（90度）；
-ms变换原点：左上；
-o变换：旋转（90度）；
-o变换原点：左上；
变换：旋转（90度）；
变换原点：左上；
位置：绝对位置；
左：13%；
顶部：0px；
空白：nowrap；
字体大小：11px；
显示：内联块；
}
[1]

从语义上讲，标签应该是节内的标题，以便将节标识为广告

到

从语义上讲，标签应该是节内的标题，以便将节标识为广告

到

用

class=“Ad label”

在广告行中添加您的

span

，如下所示：

<div style="position: relative;">
    <section>
        <div class="row">
            <div class="row-sm-height">
            <span class="Ad-label">Advertisement</span>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>

用

class=“Ad label”

在广告行中添加您的

span

，如下所示：

<div style="position: relative;">
    <section>
        <div class="row">
            <div class="row-sm-height">
            <span class="Ad-label">Advertisement</span>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>

检查此解决方案。现在，标签对任何大小的广告都有响应。如果您的问题能够解决，您可以使用此选项进行检查。我将标签移到了部分中，以获得更好的语义代码。由于您的广告现在不可见，我通过CSS添加了自定义高度。请在将此代码用于实际广告时删除相同的代码。检查此预览

<div class="ad-box">
    <section>
        <div class="Ad-label">Advertisement</div>
        <div class="row">
            <div class="row-sm-height">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>
</div>

.ad-box{
    position:relative;
    background:#ccc; /*-please remove this while final output.-*/
}
.Ad-label {
    color: #444;
    background: #ddd;
    font-family: arial;
    padding: 3px 10px;
    margin:0;
    font-size: 10px;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    right: -86px;
    top: 0;
}

/*-this is temporary for height. please remove this while final output.-*/
.row-sm-height{
    height:150px; 
}
/*--*/


广告
（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；
.广告盒{
位置：相对位置；
背景：#ccc；/*-请在最终输出时删除此项-*/
}
.广告标签{
颜色：#444；
背景：ddd；
字体系列：arial；
填充：3x10px；
保证金：0；
字体大小：10px；
-webkit变换：旋转（90度）；
-webkit变换原点：左上；
-moz变换：旋转（90度）；
-moz变换原点：左上；
-ms变换：旋转（90度）；
-ms变换原点：左上；
-o变换：旋转（90度）；
-o变换原点：左上；
变换：旋转（90度）；
变换原点：左上；
位置：绝对位置；
右：-86px；
排名：0；
}
/*-这是暂时的高度。请在最终输出时删除此项-*/
.行sm高度{
高度：150像素；
}
/*--*/

<div class="ad-box">
    <section>
        <div class="Ad-label">Advertisement</div>
        <div class="row">
            <div class="row-sm-height">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>
</div>

.ad-box{
    position:relative;
    background:#ccc; /*-please remove this while final output.-*/
}
.Ad-label {
    color: #444;
    background: #ddd;
    font-family: arial;
    padding: 3px 10px;
    margin:0;
    font-size: 10px;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    right: -86px;
    top: 0;
}

/*-this is temporary for height. please remove this while final output.-*/
.row-sm-height{
    height:150px; 
}
/*--*/


广告
（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；
.广告盒{
位置：相对位置；
背景：#ccc；/*-请在最终输出时删除此项-*/
}
.广告标签{
颜色：#444；
背景：ddd；
字体系列：arial；
填充：3x10px；
保证金：0；
字体大小：10px；
-webkit变换：旋转（90度）；
-webkit变换原点：左上；
-moz变换：旋转（90度）；
-moz变换原点：左上；
-ms变换：旋转（90度）；
-ms变换原点：左上；
-o变换：旋转（90度）；
-o变换原点：左上；
变换：旋转（90度）；
变换原点：左上；
位置：绝对位置；
右：-86px；
排名：0；
}
/*-这是暂时的高度。请在最终输出时删除此项-*/
.行sm高度{
高度：150像素；
}
/*--*/

你能把这个放在提琴里，这样我们可以更容易地编辑它吗？嗨，我试过了，但没有出现任何东西，因为这是一个谷歌adsense广告。请用提琴做一个假的广告。或者给我们更多信息。这个广告是垂直显示在你网站的左侧还是右侧？你能把它放在提琴里，这样我们可以更容易地编辑它吗？嗨，我试过了，但没有出现，因为它是谷歌adsense广告。请用提琴做一个假广告。或者给我们更多信息。这个广告是垂直显示在你网站的左侧还是右侧？嗨@Arleigh Hix，我试过了，看起来广告与标签重叠了。嗨@Arleigh Hix，我试过这个，看起来广告与标签重叠了@E.Agolli，如果广告文本是ontop，这很好，你知道如何让它垂直显示在图像的左侧或右侧吗？为此，我认为你应该让标签和脚本的跨度显示内联块，然后将这个类应用到标签上。垂直文本{transform:rotate（90度）；transform origin:left top 0；float:left；}@E.Agolli，如果广告文本是ontop，这很好，有没有办法让它垂直显示在图像的左侧或右侧？为此，我认为应该让标签和脚本的跨度显示内联块，然后将这个类应用于标签。垂直文本{变换：旋转（90度）；变换原点：左上0；浮点：左；}

.Ad-label
{
    text-align: left;
    padding: 3px 0px;
    position: relative;
    top: 0px;
    font-size: 10px;
    width: 100%;
    float: left;
}

<div class="ad-box">
    <section>
        <div class="Ad-label">Advertisement</div>
        <div class="row">
            <div class="row-sm-height">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>
</div>

.ad-box{
    position:relative;
    background:#ccc; /*-please remove this while final output.-*/
}
.Ad-label {
    color: #444;
    background: #ddd;
    font-family: arial;
    padding: 3px 10px;
    margin:0;
    font-size: 10px;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    right: -86px;
    top: 0;
}

/*-this is temporary for height. please remove this while final output.-*/
.row-sm-height{
    height:150px; 
}
/*--*/