1

我正在尝试将 iframe 嵌入到我的测试博客的“测试”页面中 - damianp1.blogspot.co.uk

我已经从页面中删除了很多不需要的项目以腾出尽可能多的空间,但是找不到 id 来删除 iframe 后面出现的蓝色框,也无法让 iframe 适合底部带有灰色边框的白色框。

这是我到目前为止使用的代码:

<style type="text/css">

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
.main-inner .columns {position: relative; left: -205px; top 50px; width: 1305;padding-left:0 !
important;padding-right:0 !important;}

</style>
</b:if>
<style>]

</style>

<div class="post-outer" style="width:1100px;">
<div id="outerdiv" style="width: 1200px; overflow: hidden">
<iframe width="1300" style="position: relative; left: -190px; top: -34px" height="600" 
src="http://wildlife-ramblings.blogspot.co.uk/" scrolling="yes" frameborder="0"></iframe>
</div>
</div>

有人可以告诉我如何将所有内容正确组合在一起,以便 iframe 整齐地填充页面吗?

非常感谢,达米安。

4

2 回答 2

2

iframe 后面的蓝色框位于此处:

.post-outer {
background-color: #eef8f8;
border: solid 1px #e8e8e8;

要删除蓝色框,您可以隐藏“.post-outer”或:

background-color: transparent;
border: none;

在需要的地方添加“!important”。

iframe 后面的白框位于此处:

.main-outer {

要删除边框,请删除:

box-shadow: 0 1px 3px rgba(0, 0, 0, .15);

编辑:( 基于不同的格式理念)

如果您想扩大蓝色和白色部分,您必须将博客的宽度扩大到与 iframe 相同或更大的宽度。点击“模板”>橙色按钮,上面写着“自定义”。在加载的页面上单击“调整宽度”。

如果您不想增加整个博客的宽度,您可以使用条件标签来仅影响该页面。要仅影响该特定页面,请找到“/b:skin”并在其下方粘贴以下代码:

 <b:if cond='data:blog.url == &quot;http://damianp1.blogspot.co.uk/p/test_6572.html&quot;'>
 <style>
 #Blog1 {
 width: 1200px !important;
 }
 </style>
 </b:if>

要扩展白色部分的高度,您必须添加“高度:800 像素”或 iframe 的高度(或超过 iframe 的 20 像素-40 像素)。

确保删除 .post-outer 上的 110% 宽度以及您在第一个答案之前所做的任何其他编辑。

编辑:被问及更好的方法:

在您想要 ifrmae 的帖子页面中,使用以下代码:

<style>
html, body {
overflow-y: hidden;
} 

#iframe-wrapper {
height: 100%;
width:1100px;
position: fixed;
scroll: no;
margin: 0 auto;
left:0px;
right: 0px;
z-index:9999;
margin-top: -52px;
top: 0px
bottom: 0px;
}

#title-wrapper {
height:70%;
margin:0 auto;
width: fixed;
background-color:  white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
border-bottom:20px  white solid;
border-right:20px  white solid;
border-left:20px  white solid;
text-align:center;
border-radius:30px;
-moz-border-radius:  30px;
-webkit-border-radius:  30px; 
}

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
</style>

<div id="iframe-wrapper"><div id="iframe-inner">
</div><div id="title-wrapper"><h3><span style="color: black; font-size: 30px">Wildlife Ramblings</span></h3>

<div style="border: solid #e8e8e8 1px; padding: 20px; background: #eef8f8; border-radius:20px; -moz-border-radius:  20px; -webkit-border-radius: 20px; height: 83%"><embed  src="http://wildlife-ramblings.blogspot.co.uk/" width="100%" height="100%"></embed></div>
</div></div>

这会将 iframe 放在博客本身上(但具有相同的博客样式,包含带圆角的蓝色和白色背景),仅在您粘贴代码的页面上。也许这对您来说会更容易。

您可能需要通过更改上面显示的部分代码来调整 iframe 的位置。找到这部分代码:

#iframe-wrapper {
margin-top: -52px;
}

要将整个 iframe 向上移动(靠近页面顶部),请将 -52px 增加到 -62px(或其他任何值)。要将整个 iframe 向下移动(更靠近页面底部),请将 -52px 减少到 -42px 或其他值。

这应该是代码中唯一需要调整的部分。

当您将上面的代码复制并粘贴到您的博客页面时,这是一个快照: iframe 代码的快照

于 2013-07-05T14:00:03.217 回答
0

使用上述帖子的帮助,我刚刚在页面本身的 html 中尝试了这个,它似乎工作......

<style type="text/css">

.blog-pager, .footer, .footer-outer, .post-footer, #sidebar-wrapper, #midsidebar-
wrapper, .gapad2, .post-header-line-1, .navbar, .feed-links, #Attribution1, .comments, 
.post-title, .sidebar { display:none !important;}

#Blog1 { width: 1100px; !important; } .main-outer { width: 1170px !important; }

</style>
</b:if>
<style>]
</style>

<iframe src="http://wildlife-ramblings.blogspot.co.uk/" style= border:3px #eef8f8 
solid;" name="Wildlife Ramblings" scrolling="yes" frameborder="1" marginheight="5px" 
marginwidth="5px" height="800px" width="100%"></iframe>

这是结果... http://damianp1.blogspot.co.uk/p/test_5.html

我不确定这个解决方案有多好,但这是我迄今为止找到的最好的解决方案。我希望我能理解这一点,而不是仅仅使用不同的代码!有没有更好的方法来做到这一点?

再次感谢,达米安。

于 2013-07-06T20:48:42.100 回答