大家好,这里是初级开发人员,我的网页遇到很多问题。
但主要的一个是我的导航链接和导航栏顶部之间的间隙。
我尝试了很多解决方案,但似乎没有一个有帮助。即使对于网站中的其他问题,我真的很感激任何帮助。请记住,该网站还远未完成,我是初学者。谢谢。
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="dinnerdrone.css" rel="stylesheet"type="text/css"/>
<title>Dinner Drone Site</title>
</head>
<body>
<!-- Code for Header Navgation -->
<div id="topnav">
<ul >
<li class="link"><a href="dinnerdrone.html">Home</a></li>
<li class="link"><a href="contactus.html">Contact Us</a></li>
<li class="link"><a href="login.html">Log In</a></li>
<li class="link"><a href="signup.html">Sign Up</a></li>
<li class="link"><a href="aboutus.html">About Us</a></li>
</ul>
</div>
<!-- Code for title -->
<div id="title">
<p>Dinner Drone</p>
</div>
<!-- Code for subtitle -->
<div id="subtitle">
<p>Your favorite meals in the safest way</p>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
/* Body styles*/
body {
font-family:verdana,geneva,helvetica;
background-color: #0B0C10;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
/* The navigation bar styles */
#topnav {
position: fixed;
top: 0;
bottom: 0;
background-color: #66FCF1;
text-decoration: none;
width: 100%;
height: 80px;
}
/* website navigation bar list styles*/
#topnav li {
background-color: white;
float: right;
}
/* website navigation bar link styles*/
#topnav a {
display: block;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 17px;
height: 100%;
color: #66FCF1;
font-size: 22px;
text-decoration: none;
}
#topnav a:hover {
transition: 0.5s;
color: blue;
}
/* Style for web heading beneath topnav */
#title {
color: #66FCF1;
margin-left: auto;
margin-right: auto;
padding: 20px;
text-align: center;
font-size: 100px;
}
/* Style for text beneath title */
#subtitle {
background-color: #5CDB95;
margin-top: 20px;
text-align: center;
border: 1px solid black;
font-size: 30px;
}
Run Code Online (Sandbox Code Playgroud)
导航栏中的 ul 上有一些默认边距。
#topnav ul{
margin:0;
}
Run Code Online (Sandbox Code Playgroud)
或使用以下命令重置所有元素的边距和填充:
* {
margin: 0;
padding: 0;
}
Run Code Online (Sandbox Code Playgroud)