CSS背景颜色的HTML5标记

我试图在HTML5中编码，我的<header>有3个部分：例如<div id="topHeader">，<nav> & <div id="mainHeader">CSS背景颜色的HTML5标记

的<topHeader>和<nav>具有单独的背景颜色跨越视口（100％）的宽度。

我真的很感谢一些帮助，以最好的方式来编码我想要做的事情，因为我无法弄清楚，也想以最有效的方式做到这一点。

这是一个现有的网站，这是一个很值得人们所做的那样。我想将3个部分包装到'标题'标签中。不知道我是否应该使'标题'标签全宽？

<div id="topHeader"> 
<div class="contentArea"> 

    </div><!-- e contentArea --> 
</div><!-- e topHeader --> 
<div id="mainmenu"> 
<div class="contentArea"> 

    </div><!-- e contentArea --> 
</div><!-- e menu --> 
<div id="header"> 
    <div class="contentArea"> 

    </div><!-- e contentArea --> 
</div><!-- e header --> 



#topHeader {background-color: #9c140a;} 
#topHeader .contentArea {width: 990px;} 
#mainmenu {background:#b1140b;} 
#mainmenu .contentArea {width:990px;} 
#header .contentArea {width: 990px;}

来源

2013-02-11 allanlud

'topHeader'和'mainHeader'不是HTML5。这些是你自己制造的元素吗？如果你在谈论背景颜色，也许你也在问CSS呢？ – BoltClock 2013-02-11 20:41:30

对不起，他们是div的，我会看看我是否可以编辑原文。 – allanlud 2013-02-11 20:42:23

请使用示例代码创建一个小提琴：http://jsfiddle.net/ – Alp 2013-02-11 20:42:50

好吧，我有类似你想要的东西，虽然它显然不完全像你的形象，因为它缺乏内容来填补它。

<html> 
    <body> 
     <div class="topHeader"> 
      <p>Test</p> 
     </div> 
     <nav> 
      <a href="http://google.com">Google Link</a> 
     </nav> 
     <div class="mainHeader"> 
      <p>Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. </p> 
     </div> 
    </body> 
</html>

和

.topHeader { 
    background-color: DarkRed; 
    width:100%; 
} 

.topHeader a.left { 
    margin-left:10%; 
} 

.topHeader a.right { 
    float:right; 
    margin-right:10%; 
} 
nav { 
    clear:both; 
    background-color: red; 
    width:100%; 
} 
.mainHeader { 
    width:80%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.mainHeader p { 
    border: dotted; 
} 

nav a { 
    margin-left: 10%; 
}

结果：http://jsfiddle.net/Ej47Q/8/

来源

2013-02-11 20:57:28 Logan

谢谢你的Logan。从.topheader＆nav内嵌入.mainHeader，padding内容的最佳方式是什么？对于HTML5，将所有3个部分的父元素添加为“标题”标签会更好吗？ – allanlud 2013-02-11 21:02:24

我已更新以适应内联需求。至于标题标签...可能。你可以按照康纳所做的事情做一些事情，并将其应用于我的工作。 – Logan 2013-02-11 21:17:24

感谢您的帮助！ :) – allanlud 2013-02-11 21:21:03

什么这个http://jsfiddle.net/bMySg/

<!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
      body, html{ 
       margin:0px; 
       padding:0px; 
       height:100%; 
       width:100%; 
       font-family:'verdana', sans-serif, arial; 
      } 

      header{ 
       width:100%; 
       background:#E10000; 
       height:300px; 
       padding-top:50px; /* height of header:before */ 
      } 

      header:before{ 
       content:""; 
       width:100%; 
       height:50px; 
       background:#7C0000; 
       position:absolute; 
       top:0px; 
       left:0px; 
       z-index:0; 
      } 

      .top_nav{ 
       width:75%; 
       border:dotted #FFFFFF; 
       color:#FFFFFF; 
       position:absolute; 
       top:0px; 
       padding:10px; 
       margin-left:12.5%; 
       border-top:none; 
       border-bottom:none; 
      } 

      .right{ 
       float:right; 
      } 

      .left{ 
       float:left; 
      } 

      .head_text{ 
       font-size:50px; 
       color:white; 
       text-align:center; 
       padding-top:20px; 
      } 
     </style> 
    </head> 
    <body> 
     <header> 
      <nav class="top_nav"> 
       <a href="#" class="left">Links</a> 
       <a href="#" class="right">Links</a> 
      </nav> 
      <h1 class="head_text">Navigation</h1> 
     </header> 
    </body> 
    </html>

来源

2013-02-11 21:07:01 iConnor

CSS背景颜色的HTML5标记

回答

相关问题