Question

我有一项任务，所有网页都使用相同的CSS。我的页面上有一个问题，我的页脚在我的标题中，我无法理解为什么。这是html：

  <!DOCTYPE html>
<html>
<head>

  <!--
   HTML 386 6380
   Exercise 1

   Author: Teresa Thompson
   Date: 08/27/2015
  -->

  <meta charset="UTF-8"/>
  <link href="assign1.css" rel="stylesheet" type="text/css"/>
  <title>Teresa Thompson</title>

</head>

<body>
  <div id="wrapper">
    <div id="header">
      <img src="surf.jpg" alt="Surf"/>
    </div><!--close header-->

  <div id="nav">
    <div id="menu">
    <br>
    <br>
    <br>

  <h1>Exercise #1</h1>
  </div><!--close menu-->

   <ul>
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="ex1.html" title="Exercise#1">Exercise #1</a></li>
      <li><a href="ex2.html" title="Exercise#2">Exercise #2</a></li>
      <li><a href="ex3.html" title="Exercise#3">Exercise #3</a></li>
      <li><a href="ex4.html" title="Exercise#4">Exercise #4</a></li>
   </ul>

   </div><!--close nav-->

   <div id="col-1">
     <ul>
       <li><a href="#"><img src="thumbalpaca.jpg" alt="Alpaca"/>
       <img class = "hid" src ="alpaca.jpg" alt=" "></a></li>
       <li><a href="#"><img src="thumbbear.jpg" alt="Spectacled Bear"/>
       <img class = "hid" src ="bear.jpg" alt=" "></a></li>
     </ul> 
   </div><!--close col-1--> 
   <div id="col-2">
     <ul>   
       <li><a href="#"><img src="thumbgiraf.jpg" alt="Giraffe"/>
       <img class = "hid" src ="giraf.jpg" alt=" "></a></li>
       <li><a href="#"><img src="thumbllama.jpg" alt="Llama"/>
       <img class = "hid" src ="llama.jpg" alt=" "></a></li>
     </ul>
   </div><!--close col-2--> 

  <div id="footer">
     <footer>
    <a href="mailto:tianmax@hotmail.com">Teresa Thompson</a><br>

    <a href="https://validator.w3.org/nu/?doc=http&3A&2F&2Fnova.umuc.edu&2F~ct386b07&2Fexercise1&2Fex1.html">Valid HTML</a><br>
    <a href="http://www.css-validator.org/validator?uri=http&3A&2F&2Fnova.umuc.edu&2F~ct386b07&2Fexercise1&2Fassign1.css&profile=css21&usermedium=all&warning=1&lang=en">Valid CSS</a></footer>

</div><!--close footer-->  


</div><!--close wrapper-->

</body>
</html>

这是css：

    /*
 Index Style Sheet
 Author: Teresa Thompson
 Date: 08/27/2015
*/

/* Body Style */

body{
  background-color: #f0bbd3;
  font-family: Arial, Geneva;
  color: #0b0a0a;
  -webkit-background-size: cover;
  -moz-background-size: cover;

}
header, footer, section, article, nav {
  display: block;
}

/* Wrapper Style */
  #wrapper{

  background-image: url(turq-grad.jpg);
  position: relative;
  top: 0;
  left: 0;
  width: 950px;
  height: 900px;
  margin: auto;
  text-align: center;
  }

/* Header Style */
  #header{
  width: 100%;
  height: 10%;
  }

/* h1 Styles */
  h1{
  text-align: center;
  }

/* Paragraph styles */ 

#paragraph{
 text-align: right;

}

#p1{
  text-align: left;
  padding: 200px;

}

/* Navigation Styles */

  #nav{
  position: absolute;
  top: 100px;
  left: 78px;
  width: 785px;
  padding: 5px;
  list-style: none;
  height: 35px;
}  

 #nav li{
  display: inline;
  padding: 5px;
  padding-top: 15px;
  margin: 5px 0 0 2px;
  height: 25px;
}

  #nav a{
  height: 25px;
  color: #ec008c;
  font-size: 80%;
  font-size: 100%;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #ec008c;
  padding: 5px 5px 0px 5px;
  display: inline-block;
  background-color: white; 
}

  #nav a:hover{
  font-weight: bold;
  background-color: #f0bbd3;
  color: white;
}

  #info {
  width: 800px;
  margin: 200px auto 0 auto;

  color: black;
  text-align: center;
  font-weight: bold;
}  

img {
  border: 0;
}

/* Set general thumbnail styles */

/* Place the column on the page */

#col-1{
  position: absolute;
  top: 310px;
  left: 0;
}

/* remove bullets from list elements */

li{
  margin: 10px;
  list-style-type: none;
}

/* MouseOut state (default) - create a space for the larger images and hide them */

#col-1 a img.hid{
  width: 400px;
  height: 300px;
  position: absolute;
  top: 10px;
  left: 540px;
  margin-left: 10px;
  visibility: hidden;
}

/* MouseOver state (hover) - reveal larger image */

#col-1 a:hover{
  background: black;
}

#col-1 a:hover img.hid{
  visibility: visible;
  margin-left: 10px;
}

/* --The 2nd Column starts 85 pixels further to the right--- */

#col-2{
  position: absolute;
  top: 310px;
  left: 260px;
  width: 85px;
}

li{
  margin: 5px;
  list-style-type: none;
}

/* MouseOut state (default) - hide larger picture */

#col-2 a img.hid{
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 280px;
  margin-left: 10px;
  visibility: hidden;
}

/* MouseOver state (hover) - reveal larger image */

#col-2 a:hover{
  background: black;
}

#col-2 a:hover img.hid{
  visibility: visible;
}

/* Footer Styles */

#footer{
  color:#f0bbd3;
  clear: both;
  font-size: .80em;
  font-style: italic;
  text-align: center;    
}

#slideshow{
  margin: 50px auto;
  position: absolute;
  width: 320px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 5px rgb(#333);
}

#container{
  height: 320px;
  width: 320px;
  margin: 20px auto;
  position: relative;
}
.img{
  height: 320px;
  width: 320px;
  position: absolute;
}

#left_holder{
  height: 320px;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
}

#right_holder{
  height: 320px;
  width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
}


.clear{
  clear: both;
}

Thanx，Teresa

我的页脚在我的页眉中，而不是另一页

0 个答案: