如何正確對齊頁眉，導航，部分和頁腳// HTML5和CSS

我正在嘗試一段時間，以便正確對齊我的頁面。在jsfiddle中，它看起來很漂亮，但在寬屏顯示器中，部分標記一直浮到左側，並且造成了很大的混亂！我認爲我在浮動方面做錯了什麼......但仍然：這是我的課程中的練習，它說我需要將這些部分用作display：block並將它們與浮動對齊。如何正確對齊頁眉，導航，部分和頁腳// HTML5和CSS

我一直在這裏呆了很長一段時間，我的課程導師不回答！希望有人能告訴我我錯了。

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:[email protected]">[email protected]</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/

謝謝！

來源

2014-02-08 Tiago Sirious

將頁面寬度設置爲你喜歡的，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:[email protected]">[email protected]</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; 
}

希望這有助於！

來源

2014-02-08 21:41:47 Stitchy

爲標題，節和頁腳設置標準寬度或更好，將它們全部包裝在div中，爲其分配類併爲該類設置邊距。沒有什麼叫做「root」元素，用html代替（這就是他們所說的根元素）。

來源

2014-02-08 19:46:11 Nix

root可能是'：root'的一種類型。 http://css-tricks.com/almanac/selectors/r/root/ –

哦，好的，謝謝你的啓發。 – Nix

如何正確對齊頁眉，導航，部分和頁腳// HTML5和CSS

回答

相關問題