0

我正在尝试用 HTML5 编写代码，我<header>有 3 个部分：例如<div id="topHeader">，<nav>&<div id="mainHeader">

<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;}
4

2 回答 2

0

好的，我有你想要的东西，虽然它显然与你的图像不完全一样，因为它缺乏填充它的内容。

<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-11T20:57:28.980 回答
0

这个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-11T21:07:01.713 回答