如何正確地將頁面與頁眉，導航，節和頁腳對齊// HTML5和CSS

Question

我正在嘗試一段時間以正確對齊我的頁面。 在jsfiddle中，它看起來似乎不錯，但是在我的寬屏顯示器中，section標簽一直浮動到最左邊，並弄得一團糟！ 我想我在浮動方面做錯了什么...但是，仍然：這是我課程中的練習，它說我需要將這些部分用作display：block並將它們與浮動對齊。

我已經堅持了好一陣子，我的課程導師也沒有回答！ 希望有人可以告訴我我在哪里弄錯了。

HTML：

<body>
    <header class="menu">
        <a href="index.html"><img class="imglogo" src="img/TotalLogo.png"></a>
    </header>
    <section class="apres">
        <p>Para&iacuteso dos Nerds</p>
        <img src="img/Personagens.png">
        <p>Jogos, Consoles, Acess&oacute;rios e Figuras de A&ccedil;&atilde;o</p>
    </section>            
    <nav class="menu">
        <ul>
            <li><a href="index.html">Total Control</a></li>
            <li><a href="consoles.html">Consoles</a></li>
            <li><a href="jogos.html">Jogos</a></li>
            <li><a href="quiz.html">Quiz</a></li>
            <li><a href="compras.html">Compras</a></li>
        </ul>
    </nav>
    <footer class="ender">
        <p>Av. Irm&atilde;os M&aacute;rio, 234<br>
            Tel: (21) 1234-5678<br>
            <a href="mailto:contato@tecontrol.com.br">contato@tecontrol.com.br</a>
        </p>
    </footer>
</body>

CSS：

root { 
    display: block;
}
body {
    background-color: #CCCCCC;
    color: #4466AA;
    font-size: 16px;
    font-family: Verdana, Liberation;

}
a{
    text-decoration: none;
    display:block;

}
a:visited{
    color:#0000FF;
}
a:link{
    color:#0000EE;
}
.menu{
    color:#0000EE;
    list-style-image:url(img/cogumelo.png);
    width:170px;

    line-height:50px;

}
.ender{
    text-align:center;
    font-size:16px;
    padding-top:15px;
    border-top:3px solid;
}
.apres{
    text-align:center;
    font-size:18px;
    font-weight:bold;
}
.imgLogo{
    border-bottom:2px solid;
}

/* Header, nav, section e footer */

header{
    display:block;
    margin-bottom:15px;
}
nav{
    display:block;
    width:240px;
    float:left;
}
section{
    display:block;
    width:540px;
    float:right;

}

footer{
    clear:both;
}

nav li:hover{
    color:#FFF;
    background: #E2E2E2;
    border-radius:5px;
    -moz-border-radius:5px;
    padding-right:3px;
    padding-left:3px;
}

jsfiddle的鏈接是： http : //jsfiddle.net/67jrj/1/

謝謝！

Answer 1

設置頁眉，節和頁腳的標准寬度，或者更好的方法是將它們全部包裝在div中，為其分配一個類，並為該類設置邊距。 沒有什么叫做“ root”元素，用html替換（這就是root元素的意思）。

Answer 2

將頁面的寬度設置為所需的寬度，960px是一個很好的標准。 為需要在一個區域中浮動的每個元素創建一個div，然后使用下一個區域清除浮動。 另外，重新排列html中元素的順序，以使它們按需要顯示。 我包括您的頁面示例，至少是我認為您的要求的示例。 :)

HTML：

<div class="menu">
    <ul>
        <li><a href="index.html">Total Control</a></li>
        <li><a href="consoles.html">Consoles</a></li>
        <li><a href="jogos.html">Jogos</a></li>
        <li><a href="quiz.html">Quiz</a></li>
        <li><a href="compras.html">Compras</a></li>
    </ul>
</div>

<div class="apres">
    <p>Para&iacuteso dos Nerds</p>
    <img src="img/Personagens.png">
    <p>Jogos, Consoles, Acess&oacute;rios e Figuras de A&ccedil;&atilde;o</p>
</div>

<div class="ender">
    <p>Av. Irm&atilde;os M&aacute;rio, 234<br>
    Tel: (21) 1234-5678<br>
    <a href="mailto:contato@tecontrol.com.br">contato@tecontrol.com.br</a>
    </p>
</div>
</body>
</html>

CSS：

body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
margin: 0 auto;
width:960px;
}

a{
text-decoration: none;
display:block;

}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
float:left;
line-height:50px;

}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
clear:both;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;

width: 350px;
margin: auto;
}
.imgLogo{
border-bottom:2px solid;
}

/* Header, nav, e footer */

.header{

display:block;
margin-bottom:15px;
width:960px;
}
.nav{
display:block;
width:240px;
float:left;
}

nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}

希望這可以幫助！

如何正確地將頁面與頁眉，導航，節和頁腳對齊// HTML5和CSS

問題描述

2 個解決方案

解決方案1
0 2014-02-08 19:46:11

解決方案2
0 已采納 2014-02-08 21:41:47

如何正確地將頁面與頁眉，導航，節和頁腳對齊// HTML5和CSS

問題描述

2 個解決方案

解決方案1 0 2014-02-08 19:46:11

解決方案2 0 已采納 2014-02-08 21:41:47

解決方案1
0 2014-02-08 19:46:11

解決方案2
0 已采納 2014-02-08 21:41:47