HTML 5部分行为异常 [英] Html 5 section behaving out of the track
本文介绍了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屋!
查看全文