[分享]css3怎样设计h5的header

CSS3是一种强大的设计语言，可用于设计H5的header。下面将介绍如何利用CSS3来设计H5的header。

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    margin-left: 20px;
}

.nav {
    display: flex;
    margin-right: 20px;
}

.nav li {
    list-style: none;
    margin-left: 20px;
}

.nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

.nav a:hover {
    background-color: #fff;
    color: #333;
} 

首先，我们需要创建一个类名为“header”的div，该div将被用作header的容器。我们设置它的position属性为fixed，top和left属性为0，这样header就会固定在浏览器的顶部。同时，我们还设置了header的width和height属性和background-color和color属性，以改变header的样式。

为了使logo和导航菜单在header中居中，我们使用了display属性设置为flex，并使用justify-content和align-items属性进行水平和垂直居中。

接下来，我们为logo和导航条分别设置类名，并使用margin和font-size属性设置它们的间距和字体大小。我们还使用了list-style属性来去除导航条的符号，用padding属性为nav中的a链接添加间距，并使用hover伪类为链接添加鼠标悬停效果。

使用以上CSS代码，你就可以轻松地创建一个漂亮的header，使你的网站更具吸引力和易用性。