html   

 <!-- 页面头部 -->

    <header>

        <div class="main-top">

            <!-- logo -->

            <div class="logo">

               <a href=""><img src="images/logo.png" alt=""></a>

            </div>

            <!-- 导航条 -->

            <nav class="main-nav">

                <ul>

                    <li><a href="">HOME</a></li>

                    <li><a href="">ABOUT</a></li>

                    <li><a href="">GALLERY</a></li>

                    <li><a href="">FACULTY</a></li>

                    <li><a href="">EVENTS</a></li>

                    <li><a href="">CONTACT</a></li>

                </ul>

            </nav>

        </div>

    </header>

css

*{

    margin: 0;

    padding: 0;

}

ul{

    list-style: none;

}

a{

    text-decoration: none;

}

header{

    width: 100%;

    background-color: #07cbc9;

}

header .main-top {

    width: 1200px;

    /* 清除浮动 */

    overflow: hidden;

    margin: 0 auto;

}

header .main-top .logo{

    float: left;

    width: 260px;

    height: 48px;

    padding-top: 16px;

}

header .main-top .logo a{

    display: block;

    width: 260px;

    height: 48px;

}

header .main-top .main-nav{

    float: right;

    height: 48px;

    padding: 16px;

}

header .main-top .main-nav ul li{

    float: left;

    margin-right: 20px;

    font-size: 16px;

    text-decoration: center;

    line-height: 48px;  

}

header .main-top .main-nav ul li a{

    color: #fff;

}

感觉写样式的时候无从下手 写的时候很生疏 就是看着原稿图不知道该有什么思路去写这个样式