Question

我是html 5的新手，我正在学习这个，我遇到的问题是部分不适用我给定的课我不知道是什么问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <header role="banner">
        <hgroup class="main_container">
        <h1 id="logo"></h1>
        </hgroup>
        </header>
    <nav>
        <ul class="main_container">
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Initatives</a></li>
            <li><a href="#">Publications</a></li>
            <li><a href="#">Green Homes</a></li>
            <li><a href="#">Renewble Energy</a></li>
            <li><a href="#">Global Warming</a></li>
            <li><a href="#">Lives</a></li>
        </ul>
    </nav>
    <section class="main_container">
        <h1>Why this kolaveri dee? </h1>
    </section>  
</body>
</html>

== CSS ====

    body
{
    margin:0;
    background:#F6F5F1;
    font-family:Geneva, Arial, Helvetica, sans-serif;

}
h1
{
    margin:0;
}
.main_container
{
    width:950px;
    margin:0 auto;
}
header
{
    background:#fdf7e7;
    padding:10px;
}
#logo
{
    background:url(../images/logo.jpg);
    height:72px;
    width:302px;
}
nav
{
    background:#e9ebb0;
    height:41px;
    border-bottom:1px solid #c4c297;
}
nav ul
{
    list-style:none;
    background:#577a70;
    height:31px;
    text-align:center;
    margin:0;
    padding-top:10px;
    border-bottom:1px solid #3c4852;
}
nav ul li
{
    float:left;

}
nav a
{
    text-decoration:none;
    color:#ffffff;
    padding:0 20px 0 0;
    margin-right:20px;
    border-right:1px dotted white;
}
nav li:last-child a
{

    border-right:none;
}
nav a:hover
{
    color:#FFFF33;
}
section
{
    height:200px;
    clear:both;
    padding:0;
    margin:0 auto;
    width:950px;
    background:#577a70;

}

enter image description here

jsfiddle链接＆gt; http://jsfiddle.net/LNAcV/5/

编辑：每个人都感谢帮助我重组整个事情并且没有再次发现同样的问题。我的代码出了点问题，我猜现在它的工作正常。

Answer 1

添加的填充：0; 到main_container类。

问题是浏览器的generyc样式

Html 5部分表现出轨道

1 个答案: