html - 我无法让网页上的文字和其他内容出现在徽标图片的右侧
问题描述
我正在创建一个网站,并希望左侧的菜单和徽标在我向其右侧添加内容时保持静止,但每当我添加任何东西时,它都会推动它们,我早些时候发了一个帖子并设法修复了菜单(我认为),但徽标似乎仍然在整个站点上水平放置了一个看不见的屏障。到目前为止,这是我的代码:
<!DOCTYPE html>
<html>
<head>
<center>
<h1 style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">music etc.</h1>
</center>
<div class=“panel”>
<left>
<img src=img/glassparklogodraft1yellow.png height=215 width=215>
</left>
</div>
<div class="spacer"></div>
<div class=“panel”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vertical-menu {
position: absolute;
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ddd;
}
.vertical-menu a.active {
background-color: #ccc;
color: white;
}
div.spacer
{
font-size: 0;
height: 0px;
line-height: 0;
}
div {
border: 0px solid black;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50px;
background-color: white;
</style>
</div>
<body>
<div class="vertical-menu">
<a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=main.html>home</a>
<a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=magazine.html>magazine</a>
<a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=visual.html>visual content</a>
<a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=audio.html>audio</a>
<a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=contact.html>contact</a>
</div>
</body>
<body>
<center>
<p>2nd floor - the fabled sound<p>
<a href=gpmaudio/2ndfloorthefabledsound.zip download>
<img src=img/fabledsoundcover.png width=200 height=200>
</a>
</center>
</body>
<div class=“spacer”></div>
<body>
<center>
<p>2nd floor - the lebron bonus<p>
<a href=gpmaudio/2ndfloorthelebronbonus.zip download>
<img src=img/lebronbonuscover.jpg width=200 height=200>
</a>
</center>
</body>
</html>
解决方案
推荐阅读
- flutter - 如何在颤动的异步函数中访问字符串
- c# - SqlException 未处理,C#
- python - 找不到满足 ssl 认证问题要求的版本。(对于 Pycharm,终端)
- angular - 如何在不导入 node_modules 的情况下获得 NestJS 生产的分布?
- python - 用引用替换多列的唯一值
- javascript - obj=var 和 obj=fn 有什么区别
- php - PHP ImageMagick ReadImage() 坏了
- rest - 使用 reqwest 重用连接
- ios - 无法在 Xcode 中使用 firebase auth 构建颤振应用程序
- python - 通过回调函数在 keras/tensorflow 中动态更新变量