我目前正在学习HTML5和CSS。在构建一个小网页后，我包含一个重置css并对我的主css文件进行了一些调整，以保持代码组织良好。现在的问题？我的页面上方有一个额外的空间（我把它染成红色）。我一直在上下搜索我似乎无法看到导致这个的属性或标签。请帮忙........ 我附上了项目文件
//alert('SALUT');
function unavailable(){
alert("Désolé ce service n'est pas encore disponible");
}
function blinker(){
document.getElementById('spfoText').innerHTML = "<br>";
setTimeout("appear()", 500);
}
function appear(){
document.getElementById('spfoText').innerHTML= "SUP'INFO";
setTimeout("blinker()", 500);
}/*--------Reset css code---------*/
body {
line-height:1;
margin-top: 0;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/*-------------------------------*/
/*GLOBAL STUFF*/
body
{
font: 15px/1.5 arial, sans-serif;
background-color: red;
min-width: 850px;
}
.search_section{
text-align: right;
}
.N_color, #welcome{
color: #DB3340;
}
h1{
line-height: 70px;
}
header{
background-color: grey;
border-bottom: 4px solid yellow;
max-height: 45px;
margin: 0;
padding: 0;
}
.branding p{
padding: 8px 0px 0px 0px;
color: #ffffff;
display: inline-block;
font-size: 30px;
font-weight: bold;
font-family: cursive;
}
header ul{
padding-top: 25px;
text-align: right;
}
header li{
list-style: none;
display: inline;
}
header li a{
text-decoration: none;
color: white;
border: 1px solid #ffffff;
border-radius: 2px;
font-size: 15px;
padding: 0px 20px 0 20px; /* this is greatly formating the inline list*/
font-family: agency;
font-weight: bold;
}
.container{
margin: auto;
width: 95%;
min-width: 850px;
overflow:hidden;
}
/* ------------------------------------ */
/* KeyFrames */
@keyframes opa {
from{opacity: 0.1;}
to{opacity: 1;}
}
/* ------------------------------------ */
.bigV{
font-size: 150px;
}
.bvnu{
animation-name: opa;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.branding, p{
padding: 0px;
margin: 0px;
}
#motto {
font-size: 15px;
}
header li a:hover{
background-color: #DB3340;
}
.branding{
float: left;
margin: 0px;
padding: 0px;
}
#showcase{
background-color: blue;
max-height: 250px;
text-align: center;
color: #ffffff;
padding-top: 20px;
border-bottom: 4px solid yellow;
}
#spfoText{
color: lightgreen;
font-weight: bold;
font-size: 20px;
}
#showcase h1{
font-size: 80px;
font-weight: bold;
/background-color: blue;
}
.search_section{
margin: 20px 0px 0px 0px;
padding: 1px 20px 0px 0px;
height: 35px;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: space-between;
}
.search_section p{
padding: 15px 0px 0px 5px;
}
.formulaire_recherche{
padding-top: 6px;
}
.button{
width: 80px;
font-family: cursive;
font-size: 12px;
background-color: #DB3340;
border: 1px ridge #DB3340;
color: white;
text-transform:uppercase;
}
.button:hover{
border: 1px ridge #ffffff;
cursor: pointer ;
}
#showcaseText3{
font-size: 20px;
font-family: cursive;
}
/*------Article-----*/
.main_article{
background-color: white;
text-align: center;
}
#welcome{
font-size: 90px;
font-weight: bold;
font-family: "bauhaus 93";
line-height: 80px;
}
.centerBoxWrapper{
display: flex;
justify-content: space-between;
width: 60%;
margin: auto;
padding-right: 33px;
}
.centerBoxWrapper img {
height: 130px;
width: 130px;
border-radius: 50%;
border: thin ridge #DB3340;
}
.firstP{
font-weight: bold;
}
#apropos{
background: url('../img/blacktwill.png') repeat;
color: white;
padding-top: 10px;
margin-top: 25px;
min-height: 70px;
font-size: 15px;
border-bottom: thin ridge white;
/background-color: #DB3340;
}
#showcase2 {
height: 400px;
background-color: grey;
background-size: cover;
color: #ffffff;
font-size: 20px;
font-family: cursive;
}
#showcase2 h1{
font-size: 40px;
padding-top: 30px;
}
.newsButton{
width: 150px;
height: 28px;
background-color: #E74700;
color: white;
cursor: pointer;
border: none;
}
.newsButton:hover{
border: 1px ridge #ffffff;
}
.newsEmail{
height: 25px;
width: 250px;
background-color: rgba(0, 0, 0, 0.3);
border: thin solid grey;
}
.newsEmail:focus{
border: thin solid white;
color: white;
font-family: monospace;
font-size: 15px;
}
.motText{
padding-top: 40px;
font-size: 30px;
}
footer{
text-align: center;
background-coor: grey;
color: white;
}
footer nav ul{
list-style: none;
}
.items{
padding-top: 20px;
}
footer p{
display: inline;
border: thin ridge white;
width: 200px;
}
#website{
border: thin dashed white;
}
footer a{
color: white;
}<!DOCTYPE html>
<html>
<head>
<title> Réseau67 | Accueil </title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<meta http-equiv="refresh" content="50" />
<meta name="viewport" content="width=divice-width"/>
<body onload="blinker()">
<header>
<div class="container">
<div class="branding">
<p class="bigText">RESEAU-<span class="N_color">67</span></p>
<p id="motto">La promotion HighTech </p>
</div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Modules</a></li>
<li><a href="#">Activités</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1 class="bdigText"><< RESEAU-<span class="N_color">67</span> >></h1>
<p> <span id="spfoText">SUP'INFO</span></p>
<p id="showcaseText3"><< Un regard sur le futur >></p>
</div>
<div class="search_section">
<p>Nous sommes engagé pour la vulgarisation de la technology...</p>
<form class="formulaire_recherche" action="r67index.html" method="post">
<input type="search" name="inp_search" value="" placeholder="rechercher...">
<input type="submit" value="Chercher" onclick="unavailable(); return false;" class="button">
</form>
</div>
</section>
<article class="main_article">
<div class="welcomeText">
<p id="welcome" class="bvnu"> BIEN<span class="bigV">V</span>ENUE</p>
<p> Vous êtes sur réseau-67, une porte ouverte sur le futur !!</p>
</div>
<br>
<section class="container centerBoxWrapper">
<div class="centerBox rx">
<img src="img/pcnetwork.jpg" alt="réseaus informatiques" id="netw">
<p class="firstP">Réseaux Informatiques</p>
</div>
<div class="line" style="border-left:thin black solid; height: 150px;"></div>
<div class="centerBox prog">
<img src="img/pcprog.jpg" alt="Programmation">
<p class="firstP">Programmation</p>
</div>
<div class="line" style="border-left:thin black solid; height: 150px;"></div>
<div class="centerBox telecom">
<img class="pic" src="img/pctelecom.jpg" alt="Télécommunication">
<p class="firstP">Télécommunication</p>
</div>
</section>
<section id="apropos">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</section>
<section id="showcase2">
<div class="container news_text">
<h1>"LA TECHNOLOGY AU BOUT DES DOIGTS"</h1>
<p>Recevez nos newsletters pour rester Tuned-In</p>
</div>
<div class="container news_input">
<input type="email" name="newsEmail" value="" placeholder="Saisissez votre email ici..." class="newsEmail">
<input type="button" name="newsButton" value="Envoyer" onclick="blinker()" class="newsButton">
</div>
</section>
<section>
<div class="container">
<div class="motText">
"Notre savoir faire est le fruit d'une recherche inslassable de l'innovation en utilisant les technologie de
l'information comme tremplin. le réseau-67 se positionne donc comme un acteur actif dans le monde du High-Tech."<br>
Le dynamisme dans la passion du métier infomatique...</p>
</div><p>
</div>
</section>
</article>
<footer>
<section class="items">
<div class="social">
<p>Facebook</p>
<p>Linkedn</p>
<p>Twitter</p>
<p>Google+</p>
</div> <br>
<p id="website">reseau-67@supinfo.sn</p>
<!--<section class="footerItems">
<div class="groupe1">
<ul>
<li>Réseaux informatiques</li>
<li>Telecom</li>
</ul>
</div>
<div class="group2">
<ul>
<li>Electronique</li>
<li>Algorithme</li>
</ul>
</div>
<div class="groupe3">
<ul>
<li>Programmation</li>
<li>Domotiques</li>
</ul>
</div>
</section>-->
</section>
</footer>
<script src="jscript/rxjscript.js">
</script>
</body>
</html>
答案 0 :(得分：2)
只需删除 <!DOCTYPE html>，然后删除文档上方的红色部分