当前位置：首页 > CSS

css 头部制作

2026-02-13 03:06:23CSS

头部制作的基本结构

使用HTML5的<header>标签作为头部容器，内部通常包含Logo、导航栏和其他辅助元素。基本结构如下：

<header class="site-header">
  <div class="logo">Your Logo</div>
  <nav class="main-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
    </ul>
  </nav>
</header>

基础样式设计

为头部添加基础样式，包括背景色、内边距和布局方式。使用Flexbox实现水平布局：

.site-header {
  background-color: #ffffff;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

导航栏样式优化

为导航菜单添加悬停效果和过渡动画，提升交互体验：

css 头部制作

.main-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.main-nav a {
  color: #333333;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #0066cc;
}

响应式设计处理

使用媒体查询实现移动端适配，添加汉堡菜单功能：

@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    padding: 1rem;
  }

  .main-nav {
    width: 100%;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
}

固定定位头部

如果需要头部始终固定在页面顶部，可以添加以下样式：

css 头部制作

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

body {
  padding-top: 70px; /* 根据头部高度调整 */
}

高级效果实现

添加透明渐变头部效果，滚动时改变样式：

.site-header {
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  transition: background 0.3s ease;
}

.site-header.scrolled {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

配合JavaScript实现滚动检测：

window.addEventListener('scroll', function() {
  const header = document.querySelector('.site-header');
  if (window.scrollY > 50) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

浏览器兼容性处理

添加必要的厂商前缀确保跨浏览器兼容：

.site-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}