HTML 5部分行为异常 [英] Html 5 section behaving out of the track

查看:31
本文介绍了HTML 5部分行为异常的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是html 5的新手,我正在学习此知识,我所面临的问题是本节未应用我给定的类,我不知道这是什么问题.

I am new to html 5 and I am learning this, the problem which i faced is section is not applying my given class I dont know what is the problem.

<!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 ====

======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;

}


jsfiddle链接> http://jsfiddle.net/LNAcV/5/

jsfiddle link > http://jsfiddle.net/LNAcV/5/

编辑:每个人都感谢我对整个内容进行的重组,没有再发现相同的问题.我的代码有些错误,我想它现在可以正常工作了.

Edit : Everyone thanks for the help i restructured the whole thing and did not found the same issue again. something was wrong in my code I guess now its working fine.

推荐答案

添加 padding:0; 到main_container类.

Add padding:0; to the main_container class.

问题出在浏览器的风格上

The problem are the generyc styles of the browser

这篇关于HTML 5部分行为异常的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆