当前位置：首页 > CSS

css网页顶部制作

2026-03-12 07:05:50CSS

固定顶部导航栏

使用position: fixed将导航栏固定在页面顶部，确保滚动页面时导航栏始终可见。设置width: 100%和top: 0使其占满宽度并紧贴顶部。

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 1rem;
  z-index: 1000;
}

添加背景与阴影

为导航栏添加背景色或渐变背景，结合box-shadow增加层次感。使用rgba()调整阴影透明度。

.navbar {
  background: linear-gradient(to right, #1a2980, #26d0ce);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

响应式布局设计

通过媒体查询调整导航栏在小屏幕设备上的样式。隐藏复杂菜单，替换为汉堡菜单图标。

@media (max-width: 768px) {
  .navbar-items {
    display: none;
  }
  .menu-icon {
    display: block;
  }
}

悬停交互效果

为导航链接添加悬停效果，使用transition实现平滑的颜色或背景变化。

.nav-link {
  color: white;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

下拉菜单实现

使用CSS绝对定位创建下拉菜单，初始状态隐藏，悬停时显示。注意设置z-index确保菜单层级。

css网页顶部制作

.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: white;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

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