【问题标题】:Moving image link out of head in HTML在 HTML 中移动图像链接
【发布时间】:2016-08-08 19:47:21
【问题描述】:

如您所见,我在右上角有图标(这些图标是我的 CSS 代码中背景图像的一部分)。我想将小马图标(红色)移到“DRF Go!”上方。图标,但我无法让它越过绿线。蓝色方块里的东西都是我的html,其余的不是。

我尝试在 JS 代码中执行此操作(我已在此处作为注释添加),但后来我不知道如何移动或更改它的大小。

(如果有更容易使用的代码,或者可以在我的 CSS 或 JS 代码中完成,请告诉我)

页面图片:

<!DOCTYPE html>
<html>

<a href="https://www.facebook.com/Lindrideklub/?fref=ts" target="_blank">
  <img src="LOGO.png" style="margin-left:130%; width:42px; padding-top:1px; height:42px;border:0">
</a>

<head>
  <title>Our Company</title>
  <link href="Forside.css" rel="stylesheet">
</head>
<body>

<nav id="nav01"></nav>
<div style="margin-left:20%;padding:1px 16px;height:1000px;">

<div id="main">
  <h1>Lindeg&aring;rdens Rideklub</h1> 
  <h2>Velkommen!</h2>
  <br>
  <p>Sp&oslash;rgsm&aring;l kan viderestilles til drakenia7@gmail.com</p>
  <footer id="foot01"></footer>
</div>

<script src="script.js"></script>

</body>
</html>

如果需要,这里是 CSS 代码

body {
background-image: url("Forside.jpg");
background-repeat: no-repeat;
background-size: 1920px;
background-attachment: scroll;
background-position: top; 
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: #cccccc; 
color: #696969;                     /*tekst*/
padding: 230px;                     /*Ryk side ned*/
padding-left: 180px;                /*Ryk side mod højre*/
padding-right: 420px;               /*Ryk side mod venstre*/  
}

#main {
padding: 5px;                       /*Ryk tekst ned*/
padding-left:  15px;                /*Ryk tekst mod højre*/
padding-right: 15px;                /*Ryk tekst mod venstre*/
background-color: #ffffff;          /*Baggrunds farve til felt*/
border-radius: 0 0 5px 5px;
}

h1 {
font-family: Georgia, serif;
border-bottom: 3px solid green;     /*Linje under overskrift*/
color: #666666;                     /*Overskrifts farve*/
font-size: 30px;
}

table {
width:100%;
}

table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

th {
text-align: left; 
}

table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}

ul#menu {
padding: 0;
margin-bottom: 11px;
padding-left: 333px;
}

ul#menu li {
display: inline;
margin-right: 3px;
}

ul#menu li a {
/*background-color: #ffffff;*/
padding: 10px 20px;
text-decoration: none;
color: #000000;
border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
color: white;
background-color: black;
}

还有JS代码

document.getElementById("foot01").innerHTML =
"<p>" + new Date().getFullYear() + " LNB. All rights reserved.</p>";

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Forside.html'>Forside</a></li>" +
"<li><a href='Omos.html'>Om os</a></li>" +
"<li><a href='maps.html'>Find os</a></li>" +
"<li><a href='nyheder.html'>Nyheder</a></li>" +
"<li><a href='Kontakt.html'>Kontakt</a></li>" +
"</ul>";

/*var img = new Image();
  img.src = 'LOGO.png';
  img.onclick = function() {
  window.location.href = 'https://www.facebook.com/Lindrideklub';
};
  document.body.appendChild(img);*/

【问题讨论】:

    标签: javascript html css image hyperlink


    【解决方案1】:

    尝试使用position:absolute 并设置topleft,使其与您想要的“框”匹配。

    【讨论】:

    • 这不是 CSS 吗?我不知道如何在 css 中获取链接
    • 是的,它是 CSS。我会这样做的方式是:创建一个 &lt;div&gt; 并将图像作为 background ,将其移动到应有的位置,使用 @987654327 创建链接&lt;div&gt; 内的 @ 标记并设置(用于链接)display:block
    • 我还是过不了绿线
    • 哦!我想到了。我用了你的建议,它奏效了,我刚开始有点搞砸了。但是现在可以了,非常感谢!
    • 使用您提供的代码,这是我上面描述的结果。 (不要介意丢失的徽标)test page 使用 Inspector 检查 .horse 类。
    【解决方案2】:

    将这个“马”元素放在与这三个图标相同的&lt;div&gt; 中,然后它会在顶部,然后只需放置您想要的位置。 或者把完整代码的jsfidle给我们,我们会帮你的

    【讨论】:

    • 没有“三个icno”。他们是大局的一部分。但我想通了。我使用了分段建议,它奏效了,我刚开始有点搞砸了。但它现在有效。但是感谢您的帮助!
    猜你喜欢
    • 2023-03-22
    • 2014-04-15
    • 2013-02-20
    • 2016-02-16
    • 2021-05-18
    • 1970-01-01
    • 2019-03-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多