当前位置：首页 > CSS

css制作网页头部

2026-02-13 10:15:08CSS

设计网页头部的基本结构

使用HTML创建头部的基础框架，通常包含<header>标签，内部可放置Logo、导航栏和其他元素。

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

基础样式设置

通过CSS定义头部布局和视觉风格，包括背景色、高度、对齐方式等。

css制作网页头部

.site-header {
  background-color: #333;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

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

.main-nav a {
  color: white;
  text-decoration: none;
  transition: opacity 0.3s;
}

.main-nav a:hover {
  opacity: 0.7;
}

响应式设计适配

使用媒体查询调整头部在小屏幕设备上的显示方式，例如折叠导航栏。

css制作网页头部

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

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

添加交互效果

通过CSS增强用户交互体验，如下拉菜单或固定头部。

/* 固定头部 */
.site-header.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* 下拉菜单示例 */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #444;
  min-width: 120px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

优化细节

调整内边距、阴影或过渡效果，提升整体视觉效果。

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

.main-nav a {
  padding: 0.5rem;
  border-radius: 4px;
}

.main-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}