Question

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

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

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

有人可以帮忙吗？任何事情都表示赞赏。

Answer 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>

Answer 2

我在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>

初学者Blogger：将标题锚定到网站的顶部

2 个答案: