0
我有兩個問題，但主要的是爲什麼我的頁腳遠離底部，即使我沒有爲身體定義大小，沒有頁邊空白，或者我想要在我的塊「頁腳」和「部分」之間選擇什麼？爲什麼我的頁腳走得太遠？
另一個問題是爲什麼即使我在頁面上放大或縮小時處於相對位置，塊「nav」和「section」的頂部並不總是對齊？
p, li
{
\t text-align: justify;
}
/*----------------------------------------------------------------------------------------------------*/
/* POLICES */
/* */
/*----------------------------------------------------------------------------------------------------*/
@font-face {
font-family: 'ambleregular';
src: url('Amble-Regular-webfont.eot');
src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Amble-Regular-webfont.woff') format('woff'),
url('Amble-Regular-webfont.ttf') format('truetype'),
url('Amble-Regular-webfont.svg#ambleregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*----------------------------------------------------------------------------------------------------*/
/* CORPS DE LA PAGE */
/* */
/*----------------------------------------------------------------------------------------------------*/
.police
{
font-family: 'ambleregular', "Times New Roman", Georgia, Arial, Verdana, "Courier New", sans-serif;
}
#Bloc_principal
{
width: 900px;
height: auto;
margin: 0 auto;
border: 2px black solid;
background-color: purple;
}
/*----------------------------------------------------------------------------------------------------*/
/* EN - TETE */
/* */
/*----------------------------------------------------------------------------------------------------*/
header
{
border: 2px solid black;
background-color: blue;
}
#logo img
{
width:56px;
height: auto;
border:2px black solid;
float: left;
}
/*----------------------------------------------------------------------------------------------------*/
/* MENU */
/* */
/*----------------------------------------------------------------------------------------------------*/
.menu
{
border: 2px black solid;
padding: 20px;
width: 200px;
position: relative;
top: 12px;
left: 10px;
background-color: yellow;
}
.menu_perso
{
border: 2px black solid;
margin-bottom: 10px;
}
.menu_cote
{
border: 2px black solid;
margin-bottom: 10px;
}
.menu_perso ul, .menu_cote ul
{
list-style-type: none;
}
aside
{
border: 2px black solid;
padding-left: 40px;
}
footer
{
border: 2px black solid;
margin: 0px;
background-color: green;
position: relative;
}
/*----------------------------------------------------------------------------------------------------*/
/* CORPS */
/* */
/*----------------------------------------------------------------------------------------------------*/
.contenu
{
border: 2px black solid;
width: 622px;
position: relative;
top: -363px;
left: 265px;
background-color: orange;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>GE-tools</title>
</head>
<body class="police">
\t <div id="Bloc_principal">
\t \t <header>
\t \t \t <div id="logo">
\t \t \t \t <img src="GE_tool.PNG" alt="Logo">
\t \t \t </div>
\t \t \t <h1 class="titre_principal">GE-Tools</h1>
\t \t </header>
\t \t <section class="menu">
\t \t \t <nav class="menu_perso">
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#">My Account</a></li>
\t \t \t \t \t <li><a href="#">My Mails</a></li>
\t \t \t \t \t <li><a href="#">Chat</a></li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t \t <nav class="menu_cote">
\t \t \t \t <h1>Tools</h1>
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#">aaaaaaaaaaa</a></li>
\t \t \t \t \t <li><a href="#">bbbbbbbbbbb</a></li>
\t \t \t \t \t <li><a href="#">ccccccccccc</a></li>
\t \t \t \t \t <li><a href="#">ddddddddddd</a></li>
\t \t \t \t \t <li><a href="#">eeeeeeeeeee</a></li>
\t \t \t \t \t <li><a href="#">fffffffffff</a></li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t \t <aside>
\t \t \t \t <a href="#">Contact Me</a>
\t \t \t </aside>
\t \t </section> \t
\t \t <section class="contenu">
\t \t \t <h1>Welcome in GE-tool</h1>
\t \t \t <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
\t \t \t <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p>
\t \t </section>
\t \t <footer>
\t \t \t <p>Copyright GE - Tools corporation 2017©</p>
\t \t </footer>
\t </div>
</body>
</html>
不幸的是，如果我想的頂部和10像素的權利之間的餘量，如果我補充保證金：10px的在.contenu它使一個很大標題和部分之間的孔。那我該怎麼辦？ –
如果我正確地理解了你，應該沒問題。只需添加'margin-top：10px; '.menu'內的margin-left：10px'和'.contenu'內的margin-top：10px'。另外，不要忘記在'footer'內部添加'clear：both'來清除浮動內容，而不會弄亂你的結構，請參閱[這裏]的解釋（https://css-tricks.com/the-how-and-爲什麼-的信息交換花車/）。並檢查此[演示]（https://jsfiddle.net/Lae8t6df/）我提到的更改。 –