css网页顶部制作

固定定位顶部导航栏

使用CSS的position: fixed属性可以让导航栏固定在页面顶部，不随页面滚动而移动。设置top: 0和width: 100%确保导航栏覆盖整个视口宽度。

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

添加背景和阴影效果

为顶部区域添加背景色和阴影可以增强视觉层次感。使用box-shadow属性创建细微的阴影效果，background属性设置背景颜色或渐变。

.header {
  background: linear-gradient(to right, #4a6fa5, #3a4f6c);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

响应式设计处理

通过媒体查询调整顶部布局在不同屏幕尺寸下的表现。小屏幕时可能需要将横向导航改为垂直排列，或调整字体大小。

@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
  }
  .logo {
    font-size: 1.2rem;
  }
}

悬停交互效果

为导航链接添加悬停效果提升用户体验。使用:hover伪类改变颜色或添加过渡动画。

.nav-link {
  color: white;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #ffcc00;
}

使用Flexbox布局

Flexbox布局可以轻松创建水平排列的导航元素。设置display: flex和justify-content: space-between让logo和导航链接分居两侧。

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}