gpt4 book ai didi

html - Img 落在背景中,但它不应该

转载 作者:搜寻专家 更新时间:2023-10-31 08:51:08 26 4
gpt4 key购买 nike

我正在尝试制作一个页面,只是为了练习,但我遇到了一个问题,所以如果你运行代码, Logo 应该在顶部居中,而不是菜单在它下面居中..但它落下了在后台,请帮忙1. 如何在每三个菜单列表项下添加一个下拉列表,我可以在其中添加一些文本、图像和位置

body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
#header {
height: 300px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}

#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}

body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src = "http://via.placeholder.com/350x150" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
<a href="antomatik/onama.html">O nama</a></li>
<li class="povijest">
<a href="antomatik/povijest.html">Povijest</a></li>
<li class="kontakt">
<a href="antomatik/kontakt.html">Kontakt</a></li>

</ul>
</div>
<footer>

</footer>
</body>
</html>

最佳答案

它的header,不是#header

body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
header {
height: 100px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}

#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}

body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src="http://via.placeholder.com/300x100" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
<a href="antomatik/onama.html">O nama</a></li>
<li class="povijest">
<a href="antomatik/povijest.html">Povijest</a></li>
<li class="kontakt">
<a href="antomatik/kontakt.html">Kontakt</a></li>

</ul>
</div>
<footer>

</footer>
</body>
</html>

关于html - Img 落在背景中,但它不应该,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46000078/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com