css - 如何正确对齐页眉、导航、部分和页脚//HTML5 和 CSS

我已经尝试了一段时间来正确对齐我的页面。在 jsfiddle 中它看起来不错，但在我的宽屏显示器中，section 标签一直向左浮动并且弄得一团糟! 我认为我在 float 方面做错了......但仍然:这是我类(class)中的练习，它说我需要将这些部分用作显示: block 并将它们与 float 对齐。

我已经被困在这个问题上好一阵子了，我的类(class)导师没有回答! 希望有人能告诉我我错在哪里。

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/

谢谢!

最佳答案

将页面宽度设置为您喜欢的宽度，960px 是一个很好的标准。为每个需要在一个区域中 float 的元素创建一个 div，然后用下一个区域清除 float 。此外，重新排列 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;
}

希望这对您有所帮助!

关于css - 如何正确对齐页眉、导航、部分和页脚//HTML5 和 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21650788/

css - 如何正确对齐页眉、导航、部分和页脚//HTML5 和 CSS

上一篇：asp.net - 当我使用 Metro UI-CSS 时 Accordion 不工作

下一篇：html - CSS - 网站在 iPad 上拖出屏幕