旅游首页制作css

设计布局结构

使用Flexbox或Grid布局规划整体框架，确保响应式设计。核心区域包括导航栏、轮播图、推荐板块和页脚。示例代码：

.container {
  display: grid;
  grid-template-areas:
    "header"
    "banner"
    "content"
    "footer";
  min-height: 100vh;
}

导航栏样式

固定顶部导航栏，添加悬停效果和下拉菜单。关键属性包括position: fixed和z-index。示例：

.navbar {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-item:hover {
  transform: translateY(-3px);
}

轮播图动画

通过CSS实现自动轮播和过渡效果。结合@keyframes和transform属性：

.slide {
  animation: slide 12s infinite;
}
@keyframes slide {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
}

卡片式内容展示

为旅游推荐项目设计卡片，使用border-radius和transition增强交互感：

.card {
  border-radius: 15px;
  transition: all 0.3s ease;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

响应式适配

通过媒体查询调整不同屏幕尺寸下的布局。典型断点设置：

@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
  .navbar { flex-direction: column; }
}

页脚美化

采用渐变色和图标链接提升视觉完整性：

.footer {
  background: linear-gradient(to right, #4776E6, #8E54E9);
}
.social-icon {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}