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標記

回答

相關問題