l g网 和 h w网站头部内容的比较

首先来看下l g网的头部的大体布局

（1）给头部一个div（这里我把他命名为div-header），在div-header里面包裹一个div（这个div我把他命名为div-header-inner），在div-header-inner里面包裹一个div（这个div命名为div-inner），然后在div-inner里面写头部链接登录注册等内容。

html代码如下：

<div class="div-header">
    <div class="div-header-inner">
        <div class="div-inner">
        </div>
    </div>
    <div class="0">头部是一个整的div，分上下2层，这里只说上面那层div</div>
</div>

这里div-header自身没有设置样式，它继承body的样式，

css代码如下：

body{
    line-height:22px;
}
*{
    outline:0;
}
.div-header-inner{
    min-width:1024px;
    height:30px;
    background-color:#333;
}
.div-inner{
    position:relative;
    max-width:1308px;
    margin:0 auto;
}

实现效果图：

 

hw头部布局：

（2）给头部一个大的div（div命名为：hw-site-header）,在hw-site-header里面包裹2个div分别为hw-main-nav 和hw-submenu-wrapper，在hw-main-nav里面包裹2div分别是hw-overlay和hw-wrapper ,然后在里面写导航栏内容。

html代码如下：

<div class="hw-site-header">
    <div class="hw-main-nav">
        <div class="hw-overlay"></div>
        <div class="hw-wrapper"></div>
    </div>
    <div class="hw-submenu-wrapper"></div>
</div>

 

css样式代码如下：

body{
    line-height:1 !important
}
.hw-site-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    z-index:10001;
    min-width:1100px;
}
.hw-main-nav{
    position:relative;
    width:100%;
    height:67px;
    min-width:1000px;
}

.hw-overlay{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:67px;
    background-color:#ffffff;
}
.hw-wrapper{
    position:relative;
    height:100%;
    width:98%;
    max-width:1210px;
    margin:0 auto;
}

实现效果图：