HTML – Img落在后台,但它不应该

2023年8月18日 141次阅读

我正在尝试制作一个页面,只是为了锻炼,我遇到了一个问题,所以如果你运行代码,徽标应该在中心顶部,而不是在它下面的菜单..但它落在后台, 请帮忙

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

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>
点赞