css网站头部制作

CSS网站头部制作方法

基础结构搭建 使用HTML5语义化标签构建头部框架，通常包含<header>、<nav>等元素。示例代码：

<header class="main-header">
  <div class="logo">网站LOGO</div>
  <nav class="main-nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
    </ul>
  </nav>
</header>

样式设计要点 通过CSS设置固定定位、背景色和阴影效果：

.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

导航栏布局 采用Flexbox实现水平排列，确保响应式布局：

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
}

.main-nav ul {
  display: flex;
  gap: 2rem;
}

交互效果增强 添加悬停动画和活动状态指示：

.main-nav a {
  transition: color 0.3s;
  position: relative;
}

.main-nav a:hover {
  color: #3498db;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3498db;
  transition: width 0.3s;
}

.main-nav a:hover::after {
  width: 100%;
}

响应式处理 通过媒体查询适配移动设备：

@media (max-width: 768px) {
  .main-nav {
    display: none; /* 移动端可替换为汉堡菜单 */
  }

  .main-header {
    padding: 10px 20px;
  }
}