我想删除的导航栏和主div之间有一点距离。 footer的情况也是如此(主div包含除了footer和nav之外的所有内容)。我试过 保证金:0 margin-bottom:0 padding:0 etc nd东西,但它不工作。无法删除我的导航栏下的空间
我检查了几次代码,但找不到问题。我也搜索了谷歌,但它只是让我困惑。
我是新来编码,所以有相当的可能性,愚蠢的错误:)。
<! DOCTYPE html>
<html lang = "en" >
<head>
<base href = "D:\workstation\my webpages\3rd day\" />
<title>
Home
</title>
<link rel = "stylesheet" type = "text/css" href= "style.css" />
</head>
<body >
<nav id = "top-menu" >
<ul>
<li><a href = "home.html">Home</a></li>
<li><a href = "rock.html">Rock</a></li>
<li><a href = "paper.html">Paper</a></li>
<li><a href = "sci.html">Scissor</a></li>
<li><a href = "contact.html">Contact</a></li>
<li><a href = "buy.html">Buy</a></li>
</ul>
</nav>
<div id = "maindiv" >
<header>
<hgroup>
<h1> Rock Paper Scissors Corporation </h1>
<h2>Who Will Win!?</h2>
</hgroup>
<p>Oh, the suspense!</p>
</header>
<p class = "message" > Game status: Using HTML5 Drag and Drop</p>
<!--
<section id = "rpsgame">
<div id = "dnd" >
<div >
<img src = "D:\workstation\Ex_Files_HTML_EssT_2012\Free Exercise Files\Chap17\images\rock.png" height = 240px width = 240px /><footer>Rock</footer>
</div>
<div>
<img src = "D:\workstation\Ex_Files_HTML_EssT_2012\Free Exercise Files\Chap17\images\paper.png" height = 240px width = 240px /><footer>paper</footer>
</div>
<div>
<img src = "D:\workstation\Ex_Files_HTML_EssT_2012\Free Exercise Files\Chap17\images\scissors.png" height = 240px width = 240px /><footer>scissors</footer>
</div>
</div>
</section>
-->
<div class = "clear" ></div>
</div> <!-- main div ends here -->
<footer class = "foot">
<p>Copyright © 2017 Hamza waqar practice document</p>
</footer>
</body>
</html>
/*css starts from here*/
/*menu formating starts */
body {
width : 100%;
margin: 0;
padding: 0;
background-color : #a60;
}
nav#top-menu {
width: 100%;
height: 40px;
background-color: #531;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li a {
display: block;
float: left;
max-height: 35px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: tahoma, sans-serif;
font-size: 25px;
text-align: center;
background-color: #531;
text-decoration: none;
color: #da1;
}
#top-menu ul li a:hover { border-bottom: 2px solid brown;}
/*menu ends*/
body, p {
line-height: 1;
font-family: Georgia, serif;
font-size: 16pt;
}
h1, h2, h3, h4, h5, h6 {
font-family: tahoma, sans-serif;
color: #531;
margin: .25ex 12pt;
}
h1 { font-size : 200% }
h2 {
font-size: 130%;
color: #840; }
header p {
font-family: tahoma, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 85%;
margin: .25ex 12pt;
color: #531;
}
#maindiv {
width: 900px;
margin: 0 auto ;
padding : 0;
background-color: #eec;
}
p.message {
width: 766px;
margin: .5ex 0;
font: normal 1em Tahoma, sans-serif;
padding: 3px;
background-color: #da1;
color: black;
margin-left : 20px;
margin-top :20px;
}
section#rpsGame {
margin: 1em;
}
#dnd div {
float: left;
margin-right: 20px;
margin-bottom: 20px;
border: 2px solid #da1;
}
#dnd footer {
background-color: #da1;
font-family: Tahoma, sans-serif;
font-weight: bold;
text-align: center;
padding: 3px 0;
}
.clear {
margin: 0;
padding: 0;
clear: both;
}
footer.foot {
width : 100%;
margin : 0;
padding :0;
background-color : grey;
height : 40px;
width : 100%;
}
footer.foot p { color: #ccc;
font-size: 70%;
font-family: tahoma, sans-serif;
text-align: center;
margin: 0;
padding: 10px 0;
}
你使用浏览器中的“检查元素”? – Brian
欢迎来到堆栈溢出,@Hamza Waqar也许增加一个标记的屏幕截图会让你的图像问题更加清晰? – Degan