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

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

网页header参数,网站添加header

  • header中包含logo和导航,先在HTML中生成这些
 <header class="header">
        <img src="img/omnifood-logo.png" alt="LOGO">
        <nav class="main-nav">Navigation</nav>
    </header>

网页header参数,网站添加header

  • 很显然LOGO太大了,我们来修复它
.logo {
    height: 2.4rem;
}

网页header参数,网站添加header

  • logo在左边,导航在右边,这个很熟悉了吧,直接flexbox*法大**
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

网页header参数,网站添加header

  • 接着我们修复我们的背景和间距
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdf2e9;
    height: 9.6rem;
    padding: 0 4.8rem;
}
.logo {
    height: 2.2rem;
}

网页header参数,网站添加header

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