如您所见，我在右上角有图标(这些图标是我的 CSS 代码中背景图片的一部分)。我想将小马图标(红色)向上移动到“DRF Go!”图标，但我无法越过绿线。蓝色方 block 里面的都是我的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årdens Rideklub</h1>
<h2>Velkommen!</h2>
<br>
<p>Spørgsmå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);*/
最佳答案
尝试使用 position:absolute 并设置 top 和 left 使其匹配您想要的“框”。
关于javascript - 在 HTML 中将图像链接移出头部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36670830/