网站header设计 (网页设计header的功能)

之前我们的主页的部分搞好了

• header中包含logo和导航，先在HTML中生成这些

 <header class="header">
        <img src="img/omnifood-logo.png" alt="LOGO">
        <nav class="main-nav">Navigation</nav>
    </header>

• 很显然LOGO太大了，我们来修复它

.logo {
    height: 2.4rem;
}

• logo在左边，导航在右边，这个很熟悉了吧，直接flexbox*法大**

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

• 接着我们修复我们的背景和间距

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdf2e9;
    height: 9.6rem;
    padding: 0 4.8rem;
}
.logo {
    height: 2.2rem;
}

这样，我们标题的部分也就完成了