0

我是 Blogger 和 HTML 新手，我正在尝试在 Blogger 上建立一个时尚博客网站。

我已经成功地将标题图像设为静态（也就是说，在滚动浏览帖子时不会移动），但不幸的是它没有在网站的最顶部对齐。这使得它看起来很奇怪，因为内容在标题图像下方滚动时会消失，并且在标题图像和页面顶部之间滚动时会短暂重新出现。

我研究了一些基本的 HTML，但是当我尝试直接在我的 Blogger 网站上编辑 HTML 时，从基本 HTML 到我看到的 HTML 有一个巨大的飞跃。我只希望标题图像在最顶部对齐。

任何人都可以帮忙吗？任何事情都值得赞赏。

4

2 回答 2

1

将 css 添加top:0到 ID 为“header-outer”的 DIV

加

为什么你有这么多不必要的标记？您可以替换所有这些：

<div class="header-outer">
<div class="header-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left header-fauxborder-left">
<div class="fauxborder-right header-fauxborder-right"></div>
<div class="region-inner header-inner">
<div id="header" class="header section"><div id="Header1" class="widget Header">
    <div id="header-inner">
        <a style="display: block" href="http://monsemble.blogspot.ca/">
            <img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
        </a>
    </div>
</div>
</div>
</div>
</div>
<div class="header-cap-bottom cap-bottom">
    <div class="cap-left"></div>
    <div class="cap-right"></div>
</div>
</div>

和：

<div class="header-outer">
    <a style="display: block" href="http://monsemble.blogspot.ca/">
        <img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
    </a>
</div>
于 2013-06-26T17:20:40.463 回答
0

我在我的 Blogger 博客上遇到了类似的情况，我注意到尽管我关闭了 Blogger 网站附带的导航栏，但在 HTML 代码中，导航栏的页面顶部仍然有一个分区。我从模板中删除了它，并且能够将标题图像移动到网页的顶部。

我删除了这部分代码 -

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
    <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
    if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
        function(){ object[attribute] = val; }, false);
    } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
    }
    }
&lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
        if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: &#39;https://www.blogger.com/navbar.g?targetBlogID\0752197236978911214706\46blogName\75MahekMody.com\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://www.mahekmody.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.mahekmody.com/\46vt\0753008633957882384298&#39;,
                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
        }
        });
    &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
    </b:widget>
</b:section>
于 2014-04-27T08:27:34.493 回答