2
html, body {
\t width: 100%;
\t height: 100%;
\t margin: 0px;
\t padding: 0px;
\t background-image: url(../images/bg.jpg);
\t background-attachment: fixed;
\t background-position: center;
\t background-repeat: no-repeat;
\t background-size: cover;
\t min-height: 100%;
}
/*----------------------Header Styling------------------------------------*/
header {
\t background-color: white;
\t border-bottom-style: solid;
\t overflow: auto;
\t height: 200px;
\t font-family: "Freehand521 BT", Arial, Sans-serif;
}
header p {
\t font-family: "Freehand521 BT", Arial, Sans-serif;
\t margin: 20px 0px 0px 20px;
\t font-size: 60px;
}
header img {
\t float: right;
\t border-left: solid;
}
/*-------------------------------Main Nav Styling--------------------------------*/
#mainlinks {
\t margin-top: 60px;
}
#mainlinks ul {
\t margin-bottom: 0px;
}
#mainlinks a {
\t list-style-type: none;
\t text-decoration: none;
\t color: black;
\t margin-right: 90px;
\t margin-left: -10px;
\t font-size: 25px;
}
#mainlinks li {
\t display: inline;
\t padding-right: 5px;
}
/*----------------------------------Secondary Nav Styling----------------------------------------------------*/
.secondlinks li {
\t display: inline;
\t list-style-type: none;
}
.secondlinks ul {
\t padding-left: 0px;
}
/*-------------------------------------Main Content Styling--------------------------------------------------------*/
#contentwrap {
\t background-color: rgba(231, 231, 231, .7);
\t border-style: solid;
\t border-radius: 10px;
\t margin-top: 30px;
\t margin-left: 20px;
\t margin-right: 20px;
\t padding: 15px;
\t font-family: "Freehand521 BT", Arial, Sans-serif;
\t font-size: 17px;
}
#contentwrap img {
\t border-style: solid;
}
/*-------------------------------------------Footer Styling------------------------------------------------------*/
footer {
\t background-color: #fff;
\t border-top-style: solid;
\t margin-top: 20px;
\t width: 100%;
\t height: 130px;
\t font-family: "Freehand521 BT", Arial, Sans-serif;
\t font-size: 15px;
}
#footernav {
\t float: right;
}
#footernav li {
\t display: inline;
}
#footernav a {
\t text-decoration: none;
\t margin-right: 30px;
}<!DOCTYPE html>
<html>
<head>
\t <title>Defenders Of The Stars!--The Official Sailor Moon Fanpage!</title>
\t <meta charset="utf-8">
\t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <link rel="icon" type="image/png" href="images/SM.ico">
\t <link rel="stylesheet" type="text/css" href="style/style.css">
\t <link rel="stylesheet" href="style/normalize.css">
</head>
<body>
\t <header>
\t \t <img src="images/HeaderSilouette.png" alt="Defenders Of The Stars Header" width="200" height="200">
\t \t <p>Defenders of the stars!</p>
\t \t <nav id="mainlinks">
\t \t \t <ul>
\t \t \t \t <li><a href="main.html">Home</a></li>
\t \t \t \t <li><a href="ss.html">Sailor Senshi</a></li>
\t \t \t \t <li><a href="villains.html">Villains</a></li>
\t \t \t </ul>
\t \t </nav>
\t </header>
\t <div id="contentwrap">
\t \t <h1> Welcome Fans!</h1>
\t \t <p>Welcome to the Official Sailor Moon Fanpage! Here you will find a lot of information about the Sailor Moon Universe! Including Characters and villains alike, As well as an overview of the story so far. We will also keep this Page updated with the latest happenings in the world of Sailor Moon!</p>
\t \t <p><u>July 5 2014</u> - New Sailor Moon Anime, Sailor Moon Crystal is released!</p>
\t </div>
\t <footer>
\t \t <p id ="copyright">© Copyright 2016 Jorge Goris.<br />Designed and developed by Jorge Goris.</p>
\t \t <nav id="footernav">
\t \t \t <ul>
\t \t \t \t <li><a href="main.html">Home</a></li>
\t \t \t \t <li><a href="ss.html">Sailor Senshi</a></li>
\t \t \t \t <li><a href="villains.html">Villains</a></li>
\t \t \t </ul>
\t \t </nav>
\t </footer>
</body>
</html>這裏是我的代碼片段的一個網頁的底部。在我的主頁中，我一直在腳下留下一點空間。設置高度似乎適用於其他頁面，因爲它們有很多內容。但是，我的主頁並不是這樣，頁腳並沒有完全消失。我已經嘗試了很多不同的方式來獲得這個正確的，我似乎無法做到這一點。我究竟做錯了什麼？
非常感謝這個工作！去保存這段代碼供以後使用，因爲這個頁腳的情況一直是我試圖創建的所有頁面的麻煩。再次感謝！ – Jorge
現在，我從頂部和內容的頭部有一些空間。我如何在我的內容和頁腳之間創建相同數量的空間？ – Jorge
@你的意思是說，讓內容底部有一個圓形的邊框，在頁腳的上方（如頂部）？ – Michael