html - 如何使标题 Logo 可点击?

标签 html css blogger

请指导我如何修复某些 Blogger 代码。我刚刚制作了一个图像 Logo 并将其放在我的博客标题旁边(在标题和描述后面/使用很棒的模板)。我成功地使博客标题可点击,但没有成功找到如何使图像 Logo 可点击。我也试过把我的网址放在

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'> 

还是没变。 我尝试使用这段有效的代码在 Chrome 控制台中更改它,但我不知道如何在源 html 中修复它。

<a href="#">
<div id="header-inner
</a>

我检查了页面并尝试了一些 CSS 代码,但只会让我更加困惑。请给我一些如何修复的说明...非常感谢所有人。

<div id='header-inner'>
    <a expr:href='data:blog.homepageUrl' style='display: block'>
    <img expr:alt='data:title' expr:height='data:height' 
     expr:id='data:widget.instanceId + &quot;_headerimg&quot;' 
     expr:src='data:sourceUrl' expr:width='data:width' style='display: 
     block'/>
    </a>
    <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
        <b:include name='description'/>
    </b:if>
</div>
</b:if>
<b:else/>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>

element.style {
background-image: url(//3.bp.blogspot.com/- 
yjBU04mgpNw/W0l9tFJDjEI/AAAAAAAADRw/- 
uOagCGc3cIhBSJsH3Zl4RetnKK_iuhUQCK4BGAYYCw/s1600/101bloggertips-logo.png);
background-position: left;
width: 120px;
min-height: 37px;
_height: 37px;
background-repeat: no-repeat;
}

最佳答案

您可以添加一个 div 元素来专门定位图像周围的较小区域,而不是整个标题。

尝试替换:

<a href="#">
<div id="header-inner
</a>

与:

<div class="header-inner>
<div class="logo-container">
<a href ="#">
<img src="Your image url" class ="logo_header" alt="My Logo">
</a>
</div>
</div>

然后您可以使用 logo_container 和 logo_header 类添加一些 css,如下所示:

.logo_container {
    width:200px;
    height:auto;
    display: block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:60px;
}

.logo_header {
    width:200px;
    height:auto;
}

希望对您有所帮助!

关于html - 如何使标题 Logo 可点击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51336222/

相关文章:

javascript - 单击网页中的任何链接时在新选项卡中打开特定 URL

javascript - 博客上的随机背景图片

html - CSS 将图像裁剪到特定尺寸

javascript - 解压从 JavaScript FileReader API 发送到 Python 的 BinaryString

css - 如何仅使用 CSS 自动将绝对元素置于相对父元素的中心?

android - 如何将居中的内容对齐到Webview中

html - css如何让图像比屏幕大?

javascript - 考虑将字体设置为大号或超大号的 Chrome 用户

css - HTML 和 CSS 页面大小的大小

Javascript 加载图标无法在浏览器上禁用 JS 的情况下使用