css制作页眉

使用CSS制作页眉的方法

基本HTML结构

在HTML中创建一个页眉通常使用<header>标签，这是语义化的选择，有助于SEO和可访问性。

<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: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

导航菜单样式

为导航菜单添加样式，使其水平排列并去除默认的列表样式。

.page-header nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.page-header nav a {
  color: white;
  text-decoration: none;
}

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

固定定位页眉

如果需要页眉在滚动时保持固定在页面顶部，可以使用position: fixed。

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

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

响应式设计

通过媒体查询使页眉在小屏幕上适应不同的布局。

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

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

添加阴影效果

为页眉添加轻微的阴影效果，增强视觉层次感。

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

渐变背景

使用CSS渐变代替纯色背景，增加设计感。

.page-header {
  background: linear-gradient(to right, #333, #555);
}

通过以上方法，可以创建一个功能完善且美观的CSS页眉。根据具体需求调整样式属性，如颜色、间距和布局方式。