css怎么制作页眉

使用CSS制作页眉的方法

HTML结构 在HTML中创建一个基本的页眉结构，通常使用<header>标签：

<header class="page-header">
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
</header>

基础样式 为页眉添加基础CSS样式，包括背景色、内边距和布局：

.page-header {
  background-color: #333;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

导航菜单样式 设置导航菜单的样式，使其水平排列：

.page-header nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-header nav li {
  margin-left: 20px;
}

.page-header nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

固定定位 如果需要页眉固定在页面顶部不随滚动移动：

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

body {
  padding-top: 80px; /* 防止内容被固定页眉遮挡 */
}

响应式设计 添加媒体查询使页眉在移动设备上适配：

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    text-align: center;
  }

  .page-header nav ul {
    flex-direction: column;
  }

  .page-header nav li {
    margin: 10px 0 0 0;
  }
}

阴影效果 为页眉添加微妙的阴影增强视觉效果：

.page-header {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

悬停效果 为导航链接添加悬停交互效果：

.page-header nav a:hover {
  color: #f8f8f8;
  text-decoration: underline;
}