如何删除标题和页面顶部之间以及标题和菜单之间的空白区域。 +如何使标题的背景图片完全可见?由于我的学习,我无法使用“div”标签。 这是我的HTML代码:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Startpagina</title>
<link rel="stylesheet" href="css/algemeen.css">
</head>
<body>
<header class="hoofdfoto">
<h1>MoveIt</h1>
</header>
<nav>
<ul id="menu">
<li><a href="html/aanvraag_offerte.html"><img src="images/offerte.png" alt="Aanvraag offerte"></a></li>
<li><a href="html/verhuur.html"><img src="images/verhuur.png" alt="Verhuur"></a></li>
<li><a href="html/stappenplan_verhuis.html"><img src="images/stappenplan.png" alt="Stappenplan Verhuis"></a>
</li>
<li><a href="html/geschiedenis.html"><img src="images/geschiedenis.png" alt="Geschiedenis"></a></li>
<li><a href="html/contact.html"><img src="images/contact.png" alt="Contact"></a></li>
</ul>
</nav>
</body>
</html>
这是我的css代码:
body {
margin: 0;
background-color: slategray;
}
h1 {
text-align: center;
font-size: 50px;
}
.hoofdfoto {
background: url("../images/header.jpg") center no-repeat;
background-size: cover;
}
#menu {
list-style: none;
padding: 0;
background-color: gray;
width: 100%;
}
#menu li{
display: inline;
}
#menu li:hover{
background-color: darkgray;
}
#menu li a {
text-decoration: none;
}
#menu li a img{
height: 50px;
width: 50px;
padding: 0 8%;
}
你需要删除你的h1
标签margin
body {
margin: 0;
background-color: slategray;
}
h1 {
text-align: center;
font-size: 50px;
margin:0px; /*Add this in your css*/
}
.hoofdfoto {
background: url("https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg") center no-repeat;
background-size: cover;
}
#menu {
list-style: none;
padding: 0;
background-color: gray;
width: 100%;
}
#menu li{
display: inline;
}
#menu li:hover{
background-color: darkgray;
}
#menu li a {
text-decoration: none;
}
#menu li a img{
height: 50px;
width: 50px;
padding: 0 8%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Startpagina</title>
<link rel="stylesheet" href="css/algemeen.css">
</head>
<body>
<header class="hoofdfoto">
<h1>MoveIt</h1>
</header>
<nav>
<ul id="menu">
<li><a href="html/aanvraag_offerte.html"><img src="images/offerte.png" alt="Aanvraag offerte"></a></li>
<li><a href="html/verhuur.html"><img src="images/verhuur.png" alt="Verhuur"></a></li>
<li><a href="html/stappenplan_verhuis.html"><img src="images/stappenplan.png" alt="Stappenplan Verhuis"></a>
</li>
<li><a href="html/geschiedenis.html"><img src="images/geschiedenis.png" alt="Geschiedenis"></a></li>
<li><a href="html/contact.html"><img src="images/contact.png" alt="Contact"></a></li>
</ul>
</nav>
</body>
</html>