二.header部分的制作

一.header部分制作分析

　　1.header部分可以简单分为左右两部分

　　2.左边logo为一张图片

　　3.右边是一个水平列表

 

二.代码的实现

　　1.HTML代码

<div class="header">
        <div class="logo">
            <img src="./images/logo.png" alt="logo" class="logoimg">
        </div>
        <ul class="nav">
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">PROTFOLIO</a></li>
            <li><a href="">SERVICE</a></li>
            <li><a href="">NEWS</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </div>

　　　　①布局

　　　　　　我们将header部分放到一个div中

　　　　　　在这个div中在加入一个存放logo的div 和 一个制作导航的ul列表

　　　　②内容添加

　　　　　　在存放logo的div中添加img标签插入图片

　　　　　　在ul列表中添加li标签,并在li标签中嵌入a标签实现导航栏的点击,然后分别在a标签中写入导航栏选项名称

　　2.CSS代码

.header{
    padding: 19px 131px;
}
.logo{
    float: left;
}
.logoimg{
    width: 168px;
    height: 44px;
}
.nav{
    float: right;
    font-size: 14px;
}
.header .nav li{
    float: left;
    margin-left: 50px;
    line-height: 44px;

}

　　①首先,我们发现,header部分的内容与浏览器边界有一定的距离,所以我们需要设置内边距padding,这里的距离用ps工具测量得到

　　②logo样式

　　　　设置logo的宽高,并设置为左浮动,使logo始终保持在左边

　　③导航栏样式

　　　　设置nav高度,文字的大小,并且向右浮动,使导航栏始终保持在右边

　　　　设置li标签为左浮动,制作横向列表

　　　　设置li外边距,使导航选项之间有一定的间隔

　　　　设置行高,这里用行高撑开而不用高度直接设置